/* =====================================================================
   GRETHORIA — Page-specific layouts
   ===================================================================== */

/* ---- Hero ----------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    color: var(--color-white);
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(31,45,36,.62) 0%, rgba(31,45,36,.30) 55%, rgba(31,45,36,.15) 100%);
}
.hero__inner { position: relative; z-index: 1; max-width: 640px; }
.hero__eyebrow { color: var(--color-cream); margin-bottom: var(--space-md); }
.hero__title { color: var(--color-white); white-space: pre-line; }
.hero__text {
    font-size: 17px;
    line-height: 1.6;
    margin-top: var(--space-md);
    max-width: 46ch;
    opacity: .94;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ---- Story split ---------------------------------------------------- */
.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--color-story-bg);
}
.story__media {
    min-height: 520px;
    background-size: cover;
    background-position: center;
}
.story__body {
    padding: var(--space-3xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 620px;
}
.story__title { margin-block: var(--space-sm) var(--space-md); white-space: pre-line; }
.story__text { color: var(--color-text); margin-bottom: var(--space-lg); }

/* ---- New & trending ------------------------------------------------- */
.trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.trend-card { display: block; }
.trend-card__media { aspect-ratio: 4 / 5; background: var(--color-media); overflow: hidden; }
.trend-card__media > div {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform var(--transition-slow);
}
.trend-card:hover .trend-card__media > div { transform: scale(1.03); }
.trend-card__cat { margin-top: var(--space-sm); }
.trend-card__title { font-family: var(--font-display); font-size: 28px; margin-top: 4px; }
.trend-card__text { font-size: 14px; color: var(--color-muted); margin-block: 8px var(--space-sm); }

/* ---- Recipe cards --------------------------------------------------- */
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.recipe-card__media { aspect-ratio: 3 / 2; background: var(--color-media); overflow: hidden; }
.recipe-card__media > div { width:100%; height:100%; background-size: cover; background-position: center; transition: transform var(--transition-slow); }
.recipe-card:hover .recipe-card__media > div { transform: scale(1.03); }
.recipe-card__title { font-family: var(--font-display); font-size: 24px; margin-top: 10px; }
.recipe-card__meta { font-size: 12px; color: var(--color-muted); margin-top: 6px; letter-spacing: .04em; }

/* ---- Instagram ------------------------------------------------------ */
.instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.instagram-grid a { aspect-ratio: 1; background: var(--color-media); overflow: hidden; position: relative; }
.instagram-grid a > div { width:100%; height:100%; background-size: cover; background-position: center; transition: transform var(--transition-slow); }
.instagram-grid a:hover > div { transform: scale(1.05); }

/* ---- Testimonials --------------------------------------------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.testimonial {
    background: var(--color-paper);
    border: 1px solid var(--color-border-light);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.testimonial__quote {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.35;
    color: var(--color-ink);
}
.testimonial__author { display: flex; flex-direction: column; gap: 2px; }
.testimonial__name { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.testimonial__role { font-size: 12px; color: var(--color-muted); }
@media (max-width: 1024px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---- Newsletter ----------------------------------------------------- */
.newsletter { background: var(--color-newsletter-bg); }
.newsletter__inner { text-align: center; max-width: 560px; margin-inline: auto; }
.newsletter__form { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.newsletter__form input { flex: 1; }

/* =====================================================================
   Product listing page
   ===================================================================== */
.listing { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-2xl); align-items: start; }
.listing__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.listing__count { font-size: 13px; color: var(--color-muted); letter-spacing: .04em; }
.filters__group { padding-block: var(--space-md); border-bottom: 1px solid var(--color-border-light); }
.filters__title {
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: var(--space-sm);
}
.filters__option { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text); margin-bottom: 8px; }
.sort-select { width: auto; min-width: 170px; border: 1px solid var(--color-border); padding: 8px 12px; border-radius: var(--radius-sm); }

/* =====================================================================
   Product detail page
   ===================================================================== */
.product-detail { display: grid; grid-template-columns: 58% 42%; gap: var(--space-2xl); align-items: start; }
.gallery__main {
    background: var(--color-media);
    aspect-ratio: 1;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.gallery__thumb {
    width: 84px; height: 84px;
    background: var(--color-media);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    cursor: pointer;
}
.gallery__thumb.is-active { border-color: var(--color-forest); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { position: sticky; top: calc(var(--header-height) + 40px); }
.product-info__cat { margin-bottom: 8px; }
.product-info__title { font-size: clamp(38px, 4vw, 54px); line-height: 1.02; }
.product-info__price { font-size: 26px; font-weight: 600; margin-block: var(--space-md); }
.product-info__short { font-size: 15px; color: var(--color-text); margin-bottom: var(--space-lg); }
.product-info__sku { font-size: 12px; color: var(--color-muted); letter-spacing: .06em; margin-top: var(--space-sm); }

.variant-group { margin-bottom: var(--space-lg); }
.variant-group__label {
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-muted); margin-bottom: 10px;
}
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-chip {
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: transparent;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.variant-chip.is-active { background: var(--color-forest); color: var(--color-white); border-color: var(--color-forest); }

.product-info__actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-block: var(--space-lg); }
.product-features { display: flex; flex-wrap: wrap; gap: 8px; margin-block: var(--space-md); }
.product-perks { display: grid; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.product-perk { display: flex; gap: var(--space-sm); align-items: flex-start; }
.product-perk svg { width: 24px; height: 24px; color: var(--color-forest); flex: 0 0 auto; }
.product-perk__title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product-perk__text { font-size: 13px; color: var(--color-muted); }

.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }
.product-tag {
    font-size: 12px;
    color: var(--color-sage);
    letter-spacing: .02em;
    transition: color var(--transition-fast);
}
.product-tag:hover { color: var(--color-spice); }

.product-desc {
    background: var(--color-cream);
    padding-block: var(--space-2xl);
    margin-top: var(--space-2xl);
}
.product-desc__title { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-md); }

.perk-strip {
    background: var(--color-forest);
    color: var(--color-white);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    padding-block: var(--space-xl);
}
.perk-strip__item { text-align: center; }
.perk-strip__title { font-family: var(--font-display); font-size: 22px; }
.perk-strip__text { font-size: 12px; opacity: .82; margin-top: 4px; }

/* ---- Page hero (inner pages) --------------------------------------- */
.page-head { padding-block: var(--space-2xl) var(--space-lg); }
.page-head__title { font-size: clamp(40px, 4.4vw, 62px); }
.page-head__sub { color: var(--color-muted); margin-top: var(--space-sm); max-width: 60ch; }

/* ---- Content (article / static) ------------------------------------ */
.content { max-width: 760px; }
.content p { margin-bottom: var(--space-md); }
.content h2, .content h3 { margin-block: var(--space-lg) var(--space-sm); }
.content ul { list-style: disc; padding-left: 1.2em; margin-bottom: var(--space-md); }
.content ul li { margin-bottom: 6px; }

/* ---- Recipe detail -------------------------------------------------- */
.recipe-detail { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-2xl); align-items: start; }
.recipe-meta { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-cream); }
.recipe-meta__row { display: flex; justify-content: space-between; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }

/* ---- 404 ------------------------------------------------------------ */
.notfound { text-align: center; padding-block: var(--space-3xl); }
.notfound__code { font-family: var(--font-display); font-size: clamp(80px, 12vw, 180px); color: var(--color-sage-light); line-height: 1; }
.notfound__title { margin-block: var(--space-md); }

/* ---- Contact -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-info__row { padding-block: var(--space-md); border-bottom: 1px solid var(--color-border-light); }
.contact-info__label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.contact-info__value { font-size: 16px; margin-top: 4px; }