/*
 * The Grainy Gradients page (includes/grainy.php). Wrapper, headings, pills,
 * grid and cards come from core.css and landing.css; this is only what the
 * page adds: the hero, the tutorial and its code samples.
 */

.gr-hero { height: 260px; border-radius: 28px; margin: 0 0 14px; display: flex; align-items: flex-end; padding: 22px 24px; box-shadow: 0 4px 24px rgba(0,0,0,.08) }
.gr-hero span { font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,.28); padding: 6px 12px; border-radius: 50px; backdrop-filter: blur(6px) }
.gr-page > .tg-grain { margin: 0 0 32px }

.gr-more { font-size: 14px; color: #666; margin: 18px 0 0; line-height: 1.6 }

.gr-guide { max-width: 720px; margin: 56px 0 0 }
.gr-guide h2 { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 0 0 12px !important; color: #0A0A0A !important }
.gr-guide h3 { font-size: 16px !important; font-weight: 700 !important; margin: 28px 0 8px !important; color: #111 !important }
.gr-guide p, .gr-guide li { font-size: 15px; line-height: 1.7; color: #444 }
.gr-guide ul { padding-left: 20px; margin: 0 }
.gr-guide code { font-family: monospace; font-size: 13px; background: #f5f5f5; padding: 1px 6px; border-radius: 5px; color: #222 }
.gr-code { background: #0f0f12; color: #e6e6e6; font-family: monospace; font-size: 12.5px; line-height: 1.6; padding: 16px 18px; border-radius: 20px; overflow-x: auto; white-space: pre; margin: 12px 0 }

.gr-guide.gs-faq details { border-bottom: 1px solid #F0F0F0; padding: 14px 0 }
.gr-guide.gs-faq summary { font-weight: 600; font-size: 15px; color: #111; cursor: pointer }
.gr-guide.gs-faq p { margin: 10px 0 0 }

@media (max-width: 600px) {
	.gr-hero { height: 180px }
}

/* The grain control sits inside the page hero (tgc_page_hero 'after'). The
   old separate demo panel is gone: the hero and the cards show the grain. */
.tg-phero .tg-grain { width: min(640px, 100%); margin: 22px auto 0; background: rgba(255, 255, 255, .78); border-color: rgba(17, 17, 17, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }