/* How it works page ([ggt_how_it_works]). Loaded only on that page, after app.css and the flow sheets.
 * Builds on the home components (ggt-hero, ggt-section, ggt-steps, ggt-why, ggt-stats, ggt-faq, ggt-cta).
 * Theme tokens only, flat fills, hairline borders, one accent. Mobile first. */

/* ---------- Shared: button row ---------- */
body.ggt-theme .ggt-hiw-actions { display: flex; flex-direction: column; gap: 12px; }
body.ggt-theme .ggt-hiw-actions .ggt-btn { width: 100%; }
@media (min-width: 480px) {
	body.ggt-theme .ggt-hiw-actions { flex-direction: row; flex-wrap: wrap; }
	body.ggt-theme .ggt-hiw-actions .ggt-btn { width: auto; }
}

/* ---------- 1. Hero ---------- */
body.ggt-theme .ggt-hiw-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
body.ggt-theme .ggt-hiw-hero__copy { min-width: 0; }
body.ggt-theme .ggt-hiw-hero .ggt-hero__lead { margin-bottom: 28px; }
body.ggt-theme .ggt-hiw-hero__media { min-width: 0; margin: 0; }
body.ggt-theme .ggt-hiw-hero__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--ggt-radius); overflow: hidden; background: var(--ggt-sand-line); }
body.ggt-theme .ggt-hiw-hero__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 70%; }
body.ggt-theme .ggt-hiw-hero__tag { display: inline-flex; align-items: center; gap: 7px; }
body.ggt-theme .ggt-hiw-hero__live { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ggt-accent); }
body.ggt-theme a.ggt-hiw-hero__guide { color: var(--ggt-ink); text-decoration: none; }
body.ggt-theme a.ggt-hiw-hero__guide:hover { border-color: var(--ggt-accent); color: var(--ggt-ink); }
body.ggt-theme .ggt-hiw-hero__rating { display: inline-flex; align-items: center; gap: 3px; }
body.ggt-theme .ggt-hiw-hero__rating .ggt-icon { width: 12px; height: 12px; fill: currentColor; }
body.ggt-theme .ggt-hiw-hero__credit { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ggt-muted); }
body.ggt-theme .ggt-hiw-hero__credit a { color: var(--ggt-muted); text-decoration: underline; text-underline-offset: 2px; }
body.ggt-theme .ggt-hiw-hero__credit a:hover { color: var(--ggt-accent); }
@media (min-width: 720px) {
	body.ggt-theme .ggt-hiw-hero__frame { aspect-ratio: 16 / 10; border-radius: 24px; }
}
@media (min-width: 980px) {
	body.ggt-theme .ggt-hiw-hero { padding: 80px 0 88px; }
	body.ggt-theme .ggt-hiw-hero--photo .ggt-hiw-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); column-gap: 56px; }
	body.ggt-theme .ggt-hiw-hero__frame { aspect-ratio: 4 / 3.4; }
	body.ggt-theme .ggt-hiw-hero .ggt-hero__lead { margin-bottom: 36px; }
}
@media (min-width: 1200px) {
	body.ggt-theme .ggt-hiw-hero--photo .ggt-hiw-hero__inner { grid-template-columns: minmax(0, 1fr) 560px; column-gap: 72px; }
}

/* ---------- 2. Steps ---------- */
body.ggt-theme .ggt-hiw-steps__list { margin-bottom: 0; }
body.ggt-theme .ggt-hiw-step { display: flex; flex-direction: column; min-width: 0; padding: 28px 24px 24px; border-color: var(--ggt-line); }
body.ggt-theme .ggt-hiw-step .ggt-step__num { width: 48px; height: 48px; margin-bottom: 20px; font-size: 20px; }
body.ggt-theme .ggt-hiw-step .ggt-step__title { font-size: 22px; }
body.ggt-theme .ggt-hiw-step .ggt-step__text { flex: 1 1 auto; }
body.ggt-theme .ggt-hiw-step__detail { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ggt-line); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ggt-ink); }
body.ggt-theme .ggt-hiw-step__detail .ggt-icon { flex: none; margin-top: 1px; color: var(--ggt-accent); }
@media (min-width: 768px) {
	body.ggt-theme .ggt-hiw-step { padding: 36px 32px 28px; }
}

/* ---------- 3. Formats ---------- */
body.ggt-theme .ggt-hiw-formats__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.ggt-theme .ggt-hiw-format { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: 28px 24px; border: 1px solid var(--ggt-sand-line); border-radius: var(--ggt-radius); background: var(--ggt-paper); }
body.ggt-theme .ggt-hiw-format__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 12px; background: var(--ggt-accent-soft); color: var(--ggt-accent); }
body.ggt-theme .ggt-hiw-format__icon .ggt-icon { width: 24px; height: 24px; }
body.ggt-theme .ggt-hiw-format__title { margin: 0 0 8px; font-size: 24px; }
body.ggt-theme .ggt-hiw-format__text { margin: 0 0 20px; color: var(--ggt-ink-2); }
body.ggt-theme .ggt-hiw-format__facts { display: grid; gap: 10px; width: 100%; margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--ggt-line); list-style: none; }
body.ggt-theme .ggt-hiw-format__facts li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ggt-ink); }
body.ggt-theme .ggt-hiw-format__facts .ggt-icon { flex: none; margin-top: 1px; color: var(--ggt-muted); }
body.ggt-theme .ggt-hiw-format__more { margin-top: auto; }
@media (max-width: 479px) {
	body.ggt-theme .ggt-hiw-format__more { width: 100%; }
}
@media (min-width: 768px) {
	body.ggt-theme .ggt-hiw-formats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	body.ggt-theme .ggt-hiw-format { padding: 36px 32px 32px; }
}

/* ---------- 4. Trust (ggt-why, four cards) ---------- */
@media (min-width: 600px) {
	body.ggt-theme .ggt-hiw-trust .ggt-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	body.ggt-theme .ggt-hiw-trust .ggt-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 5. Live numbers (ggt-stats) ---------- */
body.ggt-theme .ggt-hiw-numbers { padding: 40px 0; }
body.ggt-theme .ggt-hiw-numbers .ggt-container { display: grid; gap: 4px; }
body.ggt-theme .ggt-hiw-numbers__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ggt-accent); font-family: var(--ggt-font); }
body.ggt-theme .ggt-hiw-numbers__stats { max-width: none; margin-top: 16px; }
body.ggt-theme .ggt-hiw-numbers .ggt-stats__value { font-size: 28px; }
@media (min-width: 640px) {
	body.ggt-theme .ggt-hiw-numbers__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1024px) {
	body.ggt-theme .ggt-hiw-numbers { padding: 56px 0; }
	body.ggt-theme .ggt-hiw-numbers .ggt-stats__value { font-size: 40px; }
	body.ggt-theme .ggt-hiw-numbers .ggt-stats__label { font-size: 14px; }
}

/* ---------- 6. Guide band ---------- */
body.ggt-theme .ggt-hiw-guides__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 20px; border: 1px solid var(--ggt-line); border-radius: 24px; background: var(--ggt-paper); }
body.ggt-theme .ggt-hiw-guides__copy { min-width: 0; }
body.ggt-theme .ggt-hiw-guides__title { margin: 0 0 20px; }
body.ggt-theme .ggt-hiw-guides__list { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
body.ggt-theme .ggt-hiw-guides__list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 16px; line-height: 1.5; color: var(--ggt-ink-2); }
body.ggt-theme .ggt-hiw-guides__list .ggt-icon { flex: none; width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--ggt-accent-soft); color: var(--ggt-accent); stroke-width: 2.4; }
body.ggt-theme .ggt-hiw-guides__copy .ggt-btn { width: 100%; }
body.ggt-theme .ggt-hiw-guides__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
body.ggt-theme .ggt-hiw-guides__people li { min-width: 0; margin: 0; }
body.ggt-theme .ggt-hiw-person { display: flex; flex-direction: column; min-width: 0; color: var(--ggt-ink); text-decoration: none; }
body.ggt-theme .ggt-hiw-person:hover { color: var(--ggt-accent); }
body.ggt-theme .ggt-hiw-person__img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1; margin-bottom: 10px; border-radius: var(--ggt-radius-md); object-fit: cover; background: var(--ggt-sand); }
body.ggt-theme .ggt-hiw-person__name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ggt-theme .ggt-hiw-person__city { font-size: 13px; line-height: 1.4; color: var(--ggt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 480px) {
	body.ggt-theme .ggt-hiw-guides__copy .ggt-btn { width: auto; }
}
@media (min-width: 768px) {
	body.ggt-theme .ggt-hiw-guides__card { padding: 40px; }
	body.ggt-theme .ggt-hiw-guides__people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
	body.ggt-theme .ggt-hiw-guides__card--people { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: 56px; padding: 56px; }
	body.ggt-theme .ggt-hiw-guides__people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- 7. FAQ ---------- */
body.ggt-theme .ggt-hiw-faq .ggt-faq { gap: 8px; }

/* ---------- 8. Closing row (ggt-cta) ---------- */
body.ggt-theme .ggt-hiw-cta__actions { width: 100%; }
body.ggt-theme .ggt-hiw-cta .ggt-btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
body.ggt-theme .ggt-hiw-cta .ggt-btn--secondary:hover { background: #fff; color: var(--ggt-accent); border-color: #fff; }
@media (min-width: 900px) {
	body.ggt-theme .ggt-hiw-cta__actions { width: auto; flex: none; }
}

/* Headings wrap in balanced lines (no one-word last line on phones). */
body.ggt-theme .ggt-hiw h1, body.ggt-theme .ggt-hiw h2, body.ggt-theme .ggt-hiw h3 { text-wrap: balance; }