/* ==========================================================================
   GrowthReader — pages.css
   Hero · page heads · home sections · shop · product page · article/prose ·
   contact · thank-you · search · landing · CTA
   ========================================================================== */

/* ----- Hero ------------------------------------------------------------- */
.gr-hero { padding-block: clamp(28px, 6vw, 84px); background: linear-gradient(180deg, var(--gr-paper) 0%, #fff 100%); overflow: hidden; }
.gr-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gr-s6); align-items: center; }
.gr-hero__title { margin-bottom: var(--gr-s4); font-size: var(--gr-fs-h1); }
.gr-hero__text { max-width: 54ch; font-size: var(--gr-fs-lg); color: var(--gr-muted); }
.gr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--gr-s5) 0; }
.gr-hero__actions .gr-btn { flex: 1 1 100%; }
.gr-hero__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-hero__points li { display: inline-flex; align-items: center; gap: 8px; }
.gr-hero__points .gr-icon { color: var(--gr-accent); }
.gr-hero__visual { max-width: 460px; width: 100%; margin-inline: auto; }
.gr-hero__art { display: block; width: 100%; height: auto; }
.gr-hero__stack { position: relative; width: 100%; aspect-ratio: 1.1 / 1; }
.gr-hero__cover { position: absolute; width: 48%; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; border: 1px solid var(--gr-line); border-radius: 10px; box-shadow: 0 20px 40px -18px rgba(16, 32, 46, 0.45); }
.gr-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.gr-hero__stack--3 .gr-hero__cover--1 { left: 0; top: 12%; transform: rotate(-6deg); }
.gr-hero__stack--3 .gr-hero__cover--2 { left: 26%; top: 0; z-index: 2; }
.gr-hero__stack--3 .gr-hero__cover--3 { right: 0; top: 14%; transform: rotate(5deg); }
.gr-hero__stack--2 .gr-hero__cover--1 { left: 4%; top: 8%; transform: rotate(-5deg); }
.gr-hero__stack--2 .gr-hero__cover--2 { right: 4%; top: 0; transform: rotate(4deg); z-index: 2; }
.gr-hero__stack--1 .gr-hero__cover--1 { left: 26%; top: 0; }
@media (min-width: 640px) {
	.gr-hero__actions .gr-btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
	.gr-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gr-s8); }
}

/* ----- Page head (archives, categories, pages) -------------------------- */
.gr-pagehead { padding: clamp(18px, 3vw, 36px) 0 clamp(22px, 3.5vw, 40px); background: var(--gr-paper); border-bottom: 1px solid var(--gr-line); }
.gr-pagehead__main { display: flex; gap: var(--gr-s4); align-items: flex-start; }
.gr-pagehead__icon { flex: 0 0 60px; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; color: var(--gr-accent); background: #fff; border: 1px solid var(--gr-line); border-radius: 50%; }
.gr-pagehead__title { margin: 0 0 var(--gr-s2); font-size: var(--gr-fs-h1); }
.gr-pagehead__text { max-width: 66ch; margin: 0; font-size: var(--gr-fs-lg); color: var(--gr-muted); }
.gr-topics { margin: var(--gr-s4) 0 0; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-404 .gr-searchform { margin: var(--gr-s5) auto; }
.gr-404 .gr-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ----- Home: goals, why, steps ------------------------------------------ */
.gr-goals { display: grid; gap: var(--gr-s3); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.gr-goal { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px; background: #fff; color: var(--gr-text); text-decoration: none; border: 1px solid var(--gr-line); border-radius: var(--gr-radius); transition: border-color var(--gr-dur) var(--gr-ease), box-shadow var(--gr-dur) var(--gr-ease); }
.gr-goal:hover { border-color: var(--gr-accent); box-shadow: var(--gr-shadow-sm); color: var(--gr-text); }
.gr-goal__icon { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--gr-accent); background: var(--gr-accent-soft); border-radius: 50%; }
.gr-goal__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gr-goal__text strong { font-family: var(--gr-font-head); font-size: 1.125rem; line-height: 1.25; color: var(--gr-ink); }
.gr-goal__text span { font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-goal > .gr-icon { color: var(--gr-muted); }
@media (min-width: 640px) { .gr-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gr-s4); } }

.gr-why { grid-template-columns: minmax(0, 1fr); }
.gr-why__item { padding: 22px; background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-why__item h3 { margin-bottom: 6px; font-size: 1.1875rem; }
.gr-why__item p { margin: 0; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; color: var(--gr-accent); background: var(--gr-accent-soft); border-radius: 50%; }
@media (min-width: 640px) { .gr-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gr-why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gr-steps { display: grid; gap: var(--gr-s4); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.gr-step { padding: 22px; background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-step h2, .gr-step h3 { margin-bottom: 6px; font-size: 1.1875rem; }
.gr-step p { margin-bottom: 0; color: var(--gr-muted); font-size: var(--gr-fs-sm); }
.gr-step p + p { margin-top: var(--gr-s3); }
.gr-step__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; color: #fff; font-weight: 700; background: var(--gr-ink); border-radius: 50%; }
@media (min-width: 768px) { .gr-steps:not(.gr-steps--stack) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gr-steps--stack .gr-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; }
.gr-steps--stack .gr-step__num { grid-row: 1 / span 3; margin: 0; }

/* ----- Shop bar + filters ----------------------------------------------- */
.gr-shop__bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gr-s3); margin-bottom: var(--gr-s5); }
.gr-shop__count { margin: 0; padding-top: 10px; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-filters { flex: 1 1 280px; }
.gr-filters__panel > summary { display: inline-flex; list-style: none; cursor: pointer; }
.gr-filters__panel > summary::-webkit-details-marker { display: none; }
.gr-filters__fields { display: grid; gap: var(--gr-s3); margin-top: var(--gr-s3); padding: var(--gr-s4); background: var(--gr-paper); border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-filters__fields .gr-field { margin: 0; }
.gr-filters__actions { display: flex; align-items: center; gap: var(--gr-s4); }
.gr-filters--auto [data-gr-filters-apply] { display: none; }
@media (min-width: 768px) {
	.gr-filters__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
	.gr-filters__fields .gr-check--inline, .gr-filters__actions { grid-column: span 2; }
}

/* ----- Product page ----------------------------------------------------- */
.gr-product__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gr-s5); padding-bottom: var(--gr-s6); }
@media (min-width: 900px) {
	.gr-product__top { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
	.gr-product__media { position: sticky; top: calc(var(--gr-header-h) + 24px); }
}
.gr-summary__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--gr-s3); }
.gr-summary__title { margin-bottom: var(--gr-s2); font-size: var(--gr-fs-h1); }
.gr-summary__sub { margin: 0 0 var(--gr-s3); font-size: var(--gr-fs-lg); color: var(--gr-muted); }
.gr-summary__savings { margin: 6px 0 var(--gr-s3); font-size: var(--gr-fs-sm); font-weight: 600; color: var(--gr-accent-hover); }
.gr-summary__lead { font-size: var(--gr-fs-lg); }
.gr-summary__compat { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-summary__compat .gr-icon { margin-top: 2px; color: var(--gr-accent); }
.gr-formatline { display: flex; gap: 10px; align-items: flex-start; margin: var(--gr-s4) 0; padding: 10px 14px; font-size: var(--gr-fs-sm); font-weight: 600; color: var(--gr-ink); background: var(--gr-paper); border: 1px solid var(--gr-line); border-radius: var(--gr-radius-sm); }
.gr-formatline .gr-icon { margin-top: 2px; color: var(--gr-accent); }
.gr-buybox { margin: var(--gr-s5) 0 var(--gr-s4); }

.gr-psections { max-width: 820px; padding-bottom: var(--gr-section); }
.gr-psection { padding: var(--gr-s6) 0; border-top: 1px solid var(--gr-line); }
.gr-psection > h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); }
.gr-audience { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gr-s4); }
.gr-audience__col { padding: var(--gr-s5); background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-audience__col--yes { border-color: #b8d9d4; background: #fafdfc; }
.gr-audience__col h3 { margin-bottom: var(--gr-s3); font-size: 1.1875rem; }
@media (min-width: 768px) { .gr-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gr-specs { margin: 0 0 var(--gr-s4); }
.gr-specs__row { display: grid; grid-template-columns: minmax(104px, 32%) minmax(0, 1fr); gap: var(--gr-s3); padding: 12px 0; border-bottom: 1px solid var(--gr-line); }
.gr-specs dt { font-weight: 600; color: var(--gr-ink); }
.gr-specs dd { margin: 0; color: var(--gr-text); }
.gr-toc-list { margin: 0; padding-left: 1.4rem; }
.gr-toc-list li { padding: 4px 0; }
.gr-toc-list li.is-sub { margin-left: 1rem; list-style: circle; color: var(--gr-muted); }
.gr-reviews { display: grid; gap: var(--gr-s4); margin: 0; padding: 0; list-style: none; }
.gr-review { padding: var(--gr-s5); background: #fff; border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-review__text { margin: var(--gr-s2) 0 var(--gr-s3); }
.gr-review__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-review__by strong { color: var(--gr-ink); }

/* ----- Prose (articles, pages, product descriptions) -------------------- */
.gr-prose { max-width: 70ch; }
.gr-prose > :first-child { margin-top: 0; }
.gr-prose h2 { margin-top: 2em; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.875rem); }
.gr-prose h3 { margin-top: 1.6em; }
.gr-prose p, .gr-prose ul, .gr-prose ol { margin-bottom: 1.15em; }
.gr-prose li { margin-bottom: 0.4em; }
.gr-prose img { height: auto; border-radius: var(--gr-radius); }
.gr-prose figure { margin-block: 1.5em; }
.gr-prose figcaption { margin-top: 8px; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; font-family: var(--gr-font-head); font-size: 1.1875rem; color: var(--gr-ink); border-left: 4px solid var(--gr-accent); }
.gr-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gr-prose th, .gr-prose td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gr-line); }
.gr-prose pre { overflow-x: auto; padding: 16px; background: var(--gr-paper); border-radius: var(--gr-radius-sm); }
.gr-prose .alignwide, .gr-prose .alignfull { max-width: 100%; }
.gr-prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; color: #fff; background: var(--gr-accent); border-radius: var(--gr-radius-sm); font-weight: 650; text-decoration: none; }
.gr-page .gr-prose { max-width: 100%; }

/* ----- Article ---------------------------------------------------------- */
.gr-article__head { padding-top: clamp(16px, 3vw, 32px); }
.gr-article__title { font-size: var(--gr-fs-h1); }
.gr-article__lede { font-size: var(--gr-fs-lg); color: var(--gr-muted); }
.gr-article__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: var(--gr-s4) 0 0; font-size: var(--gr-fs-sm); color: var(--gr-muted); }
.gr-article__hero { margin-top: var(--gr-s5); }
.gr-article__img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--gr-radius-lg); }
.gr-article__body { padding-block: var(--gr-s6) var(--gr-s7); }
.gr-toc { margin: 0 0 var(--gr-s5); padding: 0 var(--gr-s4); background: var(--gr-paper); border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 650; list-style: none; cursor: pointer; }
.gr-toc summary::-webkit-details-marker { display: none; }
.gr-toc details[open] summary .gr-icon { transform: rotate(180deg); }
.gr-toc ol { margin: 0; padding: 0 0 var(--gr-s4) 1.25rem; }
.gr-toc li { padding: 4px 0; }
.gr-toc li.is-sub { margin-left: 1rem; font-size: var(--gr-fs-sm); }
.gr-share { margin: var(--gr-s6) 0; padding: var(--gr-s4) 0; border-block: 1px solid var(--gr-line); }
.gr-share__label { margin: 0 0 var(--gr-s2); font-size: var(--gr-fs-sm); font-weight: 650; color: var(--gr-ink); }
.gr-share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gr-share .gr-iconbtn { border: 1px solid var(--gr-line-strong); border-radius: 50%; width: 48px; height: 48px; padding: 0; }
.gr-author { padding: var(--gr-s5); background: var(--gr-paper); border-radius: var(--gr-radius); }
.gr-author__name { margin: 0 0 4px; font-weight: 700; color: var(--gr-ink); }
.gr-author p:last-child { margin-bottom: 0; }

/* ----- Contact ---------------------------------------------------------- */
.gr-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gr-s6); }
.gr-contact__side { align-self: start; padding: var(--gr-s5); background: var(--gr-paper); border: 1px solid var(--gr-line); border-radius: var(--gr-radius); }
.gr-contact__side h2 { font-size: 1.25rem; }
@media (min-width: 900px) { .gr-contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gr-s8); } }

/* ----- Thank-you -------------------------------------------------------- */
.gr-thanks__hero { margin-bottom: var(--gr-s6); text-align: center; }
.gr-thanks__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--gr-s4); color: var(--gr-success); background: var(--gr-success-soft); border-radius: 50%; }
.gr-thanks__ref { margin-top: var(--gr-s3); font-size: var(--gr-fs-sm); color: var(--gr-muted); }

/* ----- Search results page ---------------------------------------------- */
.gr-searchpage__summary { margin: 0 0 var(--gr-s4); color: var(--gr-muted); }
.gr-searchpage__group { margin-top: var(--gr-s7); }
.gr-searchpage__group:first-of-type { margin-top: var(--gr-s5); }

/* ----- Closing CTA band + dark-section overrides ------------------------ */
.gr-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gr-s5); align-items: center; }
.gr-cta__title { margin: 0 0 var(--gr-s2); font-size: var(--gr-fs-h2); }
.gr-cta__text { max-width: 56ch; margin: 0; color: #cdd7df; }
.gr-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.gr-cta__actions .gr-btn { flex: 1 1 100%; }
.gr-section--dark .gr-price__current { color: #fff; }
.gr-section--dark .gr-price__was { color: #b9c6d0; }
.gr-section--dark .gr-buy-fallback { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.gr-section--dark .gr-buy-fallback__title { color: #fff; }
.gr-section--dark .gr-buy-fallback__text { color: #cdd7df; }
@media (min-width: 640px) { .gr-cta__actions .gr-btn { flex: 0 0 auto; } }
@media (min-width: 900px) { .gr-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--gr-s8); } }

/* ----- Landing pages ---------------------------------------------------- */
.gr-header--minimal { position: static; }
.gr-landingpage .gr-product__top { padding-top: var(--gr-s5); }
.gr-landingpage .gr-product__media { position: static; }
@media (min-width: 900px) { .gr-landingpage .gr-product__media { position: sticky; } }

/* Print: plain and ink-friendly (people print legal pages and receipts) */
@media print {
	.gr-header, .gr-footer, .gr-announce, .gr-consent, .gr-buybar, .gr-newsletter, .gr-cta { display: none !important; }
	body { color: #000; background: #fff; }
	a { color: inherit; text-decoration: underline; }
}
