/* Guide pages (/panduan/, /panduan/tv/, /en/guide/, /en/guide/tv/). Loads after site.css and only
   adds page furniture: a split hero with floating clay, contents chips, age tiles, step tiles,
   takeaway statements and an Apple-clean table. Tokens only; all art is generated clay or real
   app renders. */

/* hero: copy left, a grey stage of floating clay chores right ------------------------------- */
.g-hero .wrap { display: grid; gap: var(--s10); align-items: center; }
.g-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); max-width: 14ch; }
.g-hero .answer { max-width: 56ch; }
@media (min-width: 60rem) {
  .g-hero .wrap { grid-template-columns: 1.15fr 1fr; gap: var(--s12); }
}
.g-stage { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; border-radius: var(--radius-card); background: var(--tile); overflow: hidden; isolation: isolate; }
.g-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background: url("/assets/img/texture-section.webp") center / cover no-repeat; }
.g-stage img { position: absolute; display: block; height: auto; filter: drop-shadow(0 18px 22px rgba(29, 29, 31, .16)); animation: g-bob 6s var(--ease) infinite alternate; }
.g-stage .s1 { width: 50%; left: 25%; top: 30%; animation-delay: -1s; }
.g-stage .s2 { width: 32%; left: 6%; top: 8%; animation-delay: -3s; animation-duration: 7s; }
.g-stage .s3 { width: 28%; right: 7%; top: 9%; animation-delay: -2s; animation-duration: 5.5s; }
.g-stage .s4 { width: 27%; left: 7%; bottom: 7%; animation-delay: -4s; animation-duration: 6.5s; }
.g-stage .s5 { width: 27%; right: 8%; bottom: 8%; animation-delay: -.5s; animation-duration: 7.5s; }
@keyframes g-bob { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(8px) rotate(2deg); } }
/* a single generated scene (TV guide) instead of the cluster */
.g-stage-scene picture { display: block; height: 100%; }
.g-stage-scene img { position: static; width: 100%; height: 100%; object-fit: cover; filter: none; animation: g-drift 14s var(--ease) infinite alternate; }
@keyframes g-drift { from { transform: scale(1); } to { transform: scale(1.05) translateX(-1.5%); } }
@media (max-width: 59.99rem) { .g-stage { max-width: 420px; } }
@media (max-width: 51.99rem) { .g-split .g-stage { max-width: 260px; } }

/* contents chips: the page in one row of capsules ------------------------------------------- */
.g-toc { margin-top: var(--s8); }
.g-toc p { font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); margin: 0 0 var(--s3); }
.g-toc ul { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-toc li { margin: 0; }
.g-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5); border-radius: var(--radius-pill); background: var(--tile); color: var(--text); font-size: var(--t-small); font-weight: var(--wt-medium); text-decoration: none; transition: background .18s var(--ease), transform .18s var(--ease); }
.g-toc a:hover { background: var(--hairline); text-decoration: none; }
.g-toc a:active { transform: scale(.97); }

/* long-form rhythm: 17px body, ~1.5 leading, 65ch measure ----------------------------------- */
.g-sec { padding: calc(var(--sec) * .5) 0; }
.g-sec h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.08; max-width: 22ch; }
.g-prose > * { max-width: var(--w-prose); }
.g-prose p, .g-prose li { line-height: 1.5; }
.g-intro { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 52ch; margin-bottom: var(--s10); }

/* round-dot bullets */
.g-dots { list-style: none; padding: 0; }
.g-dots li { position: relative; padding-left: var(--s5); }
.g-dots li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }

/* takeaway: a big muted statement with dark key phrases ------------------------------------- */
.g-take { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.3; letter-spacing: -.012em; color: var(--muted); max-width: 30ch; margin: var(--s12) 0; }
.g-take .hi { font-weight: var(--wt-medium); }

/* tiles shared by reasons, ages, steps and tips --------------------------------------------- */
.g-grid { list-style: none; padding: 0; margin: 0 0 var(--s8); max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .g-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .g-grid { grid-template-columns: repeat(6, 1fr); gap: var(--s5); }
  .g-grid > * { grid-column: span 2; }
  .g-grid-32 > :nth-child(n+4) { grid-column: span 3; }
}
.g-grid > li { margin: 0; }
.g-tile { background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.g-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(29, 29, 31, .3); }
.g-tile h3 { margin: 0 0 var(--s2); }
.g-tile p { margin: 0; color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.g-grid > .reveal:nth-child(2) { transition-delay: .06s; } .g-grid > .reveal:nth-child(3) { transition-delay: .12s; }
.g-grid > .reveal:nth-child(4) { transition-delay: .18s; } .g-grid > .reveal:nth-child(n+5) { transition-delay: .24s; }

/* numbered tiles: big gradient numerals */
.g-num { counter-reset: g; }
.g-num > li { counter-increment: g; }
.g-num > li::before { content: counter(g); display: block; align-self: flex-start; padding-right: .06em; font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); line-height: 1; font-weight: var(--wt-strong); letter-spacing: -.02em; margin-bottom: var(--s5); color: #b8458a; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .g-num > li::before { background: linear-gradient(90deg, #d4582a, #b8458a 55%, #5b4bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* age tiles: two clay chores, the age, how much, the real chore list */
.g-age-art { display: flex; align-items: flex-end; height: 112px; margin-bottom: var(--s6); }
.g-age-art img { display: block; width: 104px; height: 104px; filter: drop-shadow(0 14px 16px rgba(29, 29, 31, .16)); transition: transform .5s var(--ease); }
.g-age-art picture + picture img { width: 84px; height: 84px; margin-left: calc(var(--s4) * -1); }
.g-tile:hover .g-age-art img { transform: translateY(-6px) rotate(-6deg); }
.g-tile:hover .g-age-art picture + picture img { transform: translateY(-3px) rotate(5deg); }
.g-age h3 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); letter-spacing: -.02em; line-height: 1.1; }
.g-load { align-self: flex-start; margin: var(--s2) 0 var(--s5) !important; padding: var(--s2) var(--s3); border-radius: var(--radius-nested); background: var(--bg); color: var(--text) !important; font-weight: var(--wt-medium); line-height: 1.35 !important; }
.g-age .g-dots { margin: 0; font-size: var(--t-small); color: var(--muted); }
.g-age .g-dots li + li { margin-top: var(--s1); }
.g-age-dark { background: var(--text); color: var(--on-primary); }
.g-age-dark .g-dots { color: rgba(255, 255, 255, .78); }
.g-age-dark .g-load { background: rgba(255, 255, 255, .14); color: var(--on-primary) !important; }

/* table: Apple-clean, the long examples column sheds on phones (the tiles above carry it) */
.g-table { margin: 0 0 var(--s6); max-width: 880px; }
.g-table h3 { font-size: var(--t-body); margin-bottom: var(--s2); }
.g-table table { font-size: var(--t-small); }
.g-table th, .g-table td { padding: var(--s4) var(--s5) var(--s4) 0; line-height: 1.45; }
.g-table thead th { border-bottom-color: var(--border); }
.g-table tbody th { font-weight: var(--wt-strong); white-space: nowrap; width: 9rem; }
.g-table td:last-child { padding-right: 0; }
.g-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 39.99rem) { .g-table .g-shed { display: none; } }

/* split: words and a small clay stage side by side ------------------------------------------- */
.g-split { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 52rem) { .g-split { grid-template-columns: 1.4fr 1fr; gap: var(--s16); } .g-split-flip { grid-template-columns: 1fr 1.4fr; } .g-split-flip > :first-child { order: 2; } }
.g-split .g-stage { max-width: 380px; }
.g-split .g-stage .s1 { width: 58%; left: 21%; top: 21%; }

/* keep-going tiles with small clay */
.g-tile .clay { display: block; width: 64px; height: 64px; margin-bottom: var(--s5); transition: transform .5s var(--ease); }
.g-tile:hover .clay { transform: translateY(-4px) rotate(-6deg) scale(1.06); }

/* app tile: words left, the real app rising from the bottom edge ----------------------------- */
.g-app { background: var(--tile); border-radius: var(--radius-card); padding: var(--s12) var(--s6) 0; display: grid; gap: var(--s8); overflow: hidden; }
.g-app h2 { margin-bottom: var(--s5); }
.g-app p { max-width: 52ch; }
.g-app .badges { margin: var(--s6) 0 var(--s2); }
.g-app picture { display: block; justify-self: center; width: min(300px, 80%); }
.g-app picture img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(29, 29, 31, .18)); transition: transform .6s var(--ease); }
.g-app:hover picture img { transform: translateY(-8px); }
.g-app-crop { max-height: 360px; overflow: hidden; }
@media (min-width: 52rem) {
  .g-app { grid-template-columns: 1.2fr 1fr; padding: var(--s16) var(--s16) 0; align-items: end; }
  .g-app-copy { align-self: center; padding-bottom: var(--s16); }
  .g-app-crop { max-height: 460px; }
}

/* TV: what shows, each tile with the real render or clay ------------------------------------- */
.g-show { padding-bottom: var(--s6); }
.g-show-art { display: flex; align-items: center; justify-content: center; height: 168px; margin: 0 0 var(--s6); }
.g-show-art picture { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.g-show-art img { display: block; max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 14px 22px rgba(29, 29, 31, .14)); transition: transform .5s var(--ease); }
.g-show-art .g-clay { width: 128px; height: 128px; }
.g-tile:hover .g-show-art img { transform: translateY(-6px); }
.g-show p { color: var(--text); font-size: var(--t-body); }

/* TV steps: three tiles, each holding its own h2 */
@media (min-width: 64rem) { .g-tv-steps > * { grid-column: span 2 !important; } }
.g-tv-steps h2 { font-size: var(--t-h3); line-height: 1.24; letter-spacing: -.01em; margin: 0 0 var(--s4); max-width: none; }
.g-tv-steps p, .g-tv-steps li { font-size: var(--t-small); line-height: 1.5; }
.g-tv-steps p { color: var(--text); }
.g-tv-steps ol { margin: 0 0 var(--s5); padding-left: 1.25rem; }
.g-tv-steps li + li { margin-top: var(--s2); }
.g-tv-steps .g-foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--border); color: var(--muted); }

/* tips: quiet tiles */
.g-tips .g-tile { padding: var(--s6); }
.g-tips .g-tile p { color: var(--text); font-size: var(--t-body); }

@media (prefers-reduced-motion: reduce) {
  .g-stage img { animation: none; }
  .g-tile, .g-tile .clay, .g-age-art img, .g-show-art img, .g-app picture img { transition: none; }
}
@media (max-width: 39.99rem) {
  .g-tile { padding: var(--s6) var(--s5); }
  .g-app { padding: var(--s10) var(--s5) 0; }
  .g-take { margin: var(--s10) 0; }
}
/* related-guide chips under a left-aligned FAQ */
.faq .more-links { justify-content: flex-start; margin-left: 0; }
@media (max-width: 39.99rem) { .g-show-art { height: 120px; margin-bottom: var(--s4); } .g-show-art .g-clay { width: 104px; height: 104px; } }
/* age tile: one link down to that band's own page */
.g-age .g-more { margin: auto 0 0 !important; padding-top: var(--s5); font-size: var(--t-small); }
.g-age .g-more a { display: inline-block; padding-block: 11px; font-weight: var(--wt-medium); }