/* ─── MAWADDA · Page sections ─── */

/* ═══ Home: About editorial ═══ */
.about-editorial { position: relative; overflow: hidden; }
.about-editorial .leaf-mark { width: 60vw; min-width: 480px; inset-inline-start: 38%; top: 8%; color: var(--brown); opacity: .045; }
.about-cards { display: grid; gap: 2rem; }
@media (min-width: 1120px) { .about-cards { grid-template-columns: minmax(0, 1.15fr) .9fr; align-items: start; } }
.about-statement { font-size: var(--fs-display2); text-transform: uppercase; line-height: .96; }
.about-collage-width { max-width: 34rem; }
.about-collage-width .leaf-collage { aspect-ratio: 320 / 380; }
.about-collage-width .collage-strip img { height: 100%; }
.pillars-dark .pillar, .pillars h3, .pillars p { }
.about-pillars { display: grid; gap: 1.6rem; align-content: start; }

/* ═══ Home: Explore categories (dark) ═══ */
.cats { overflow: hidden; }
.cats .leaf-mark { width: 28vw; inset-inline-start: -8vw; top: 14%; color: var(--gold); opacity: .05; }
.cats-head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 880px) { .cats-head { grid-template-columns: 1.2fr 1fr; align-items: end; } }

/* ═══ Home: flavors (bright) ═══ */
.flavors .leaf-mark { width: 24vw; inset-inline-end: -6vw; bottom: 6%; color: var(--brown); opacity: .05; }
.flavors-head { display: grid; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.6rem); }
@media (min-width: 880px) { .flavors-head { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.track-hint { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: .8rem; }
.track-hint::before { content: ""; width: 2.4rem; height: 1px; background: var(--line); }

/* ═══ Home: Art of Flavor (cinematic) ═══ */
.art-flavor { position: relative; min-height: clamp(30rem, 78vh, 46rem); display: grid; place-items: center; text-align: center; overflow: hidden; color: var(--cream); }
.art-flavor .bg { position: absolute; inset: -14% 0; z-index: 0; }
.art-flavor .bg img { width: 100%; height: 100%; object-fit: cover; }
.art-flavor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 50% 100%, rgba(23, 21, 19, .55) 0%, rgba(23, 21, 19, .75) 62%, rgba(36, 21, 13, .88) 100%), linear-gradient(0deg, rgba(23,21,19,.4), rgba(23,21,19,.4)); z-index: 1; }
.art-flavor-inner { position: relative; z-index: 2; padding-block: var(--section-pad); }
.art-flavor h2 { color: var(--white); }
.art-flavor p { color: rgba(245,239,231,.78); max-width: 34rem; margin-inline: auto; font-size: 1.05rem; }
.play-cta {
  display: inline-grid; place-items: center; gap: .9rem; margin-top: 2.6rem;
  color: var(--cream);
}
.play-cta .ring {
  width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid rgba(197, 154, 98, .55);
  display: grid; place-items: center;
  position: relative; transition: background .5s, border-color .5s;
}
.play-cta .ring::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(197, 154, 98, .25); animation: pulseRing 3.2s ease-out infinite; }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: 0; } 45% { opacity: .8; } 100% { transform: scale(1.18); opacity: 0; } }
.play-cta .ring svg { width: 22px; height: 22px; fill: var(--gold); stroke: none; }
.play-cta span { font-size: var(--fs-label); letter-spacing: .32em; text-transform: uppercase; font-weight: 700; }
.play-cta:hover .ring { background: rgba(197, 154, 98, .14); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .play-cta .ring::before { animation: none; } }

/* ═══ Home: Global banner ═══ */
.global-banner { position: relative; color: var(--cream); overflow: hidden; min-height: clamp(34rem, 70vh, 42rem); display: grid; align-items: center; background: var(--charcoal); }
.global-banner .bg { position: absolute; inset: 0; }
.global-banner .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.global-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,21,19,.9) 8%, rgba(36,21,13,.55) 52%, rgba(68, 40, 20, .35)); }
.global-inner { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 7rem); }
.global-inner h2 { color: var(--white); }
.global-inner p { color: rgba(245,239,231,.75); max-width: 32rem; }
.global-tags { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }
.global-tags span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; padding: .5em 1.1em; border: 1px solid rgba(245,239,231,.25); }

/* ═══ Home: values ═══ */
.values-grid { display: grid; gap: 0; border: 1px solid var(--line); border-inline-start: 0; border-inline-end: 0; }
@media (min-width: 880px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-cell { padding: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 3rem); border-bottom: 1px solid var(--line); position: relative; transition: background .6s; }
.value-cell:last-child { border-bottom: 0; }
@media (min-width: 880px) { .value-cell { border-bottom: 0; border-inline-start: 1px solid var(--line); } }
.value-cell:hover { background: rgba(184, 137, 85, .07); }
.value-cell .icon { width: 2.8rem; height: 2.8rem; stroke-width: 1; color: var(--brown2); margin-bottom: 1.4rem; }
.value-cell h3 { font-size: 1.5rem; }
.value-cell p { font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.value-cell.no-cta p { margin-bottom: 0; }

/* ═══ Home: blog trio ═══ */
.blog-trio { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 880px) { .blog-trio { grid-template-columns: 1.35fr 1fr 1fr; } }
.post-card { display: block; }
.post-card .post-img { overflow: hidden; aspect-ratio: 16/10.5; position: relative; border: 1px solid var(--line); }
.post-card .post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.post-card:hover .post-img img { transform: scale(1.05); }
.post-card .post-meta { display: flex; gap: 1.2rem; align-items: center; margin-top: 1.3rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); font-weight: 700; }
.post-card .post-meta time { color: var(--ink-soft); letter-spacing: .12em; }
.post-card h3 { font-size: 1.55rem; margin: .55rem 0 0; transition: color var(--t-fast); }
.post-card:hover h3 { color: var(--brown); }
.post-card .post-x { font-size: .85rem; font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin-top: .5rem; }

/* ═══ Social wall ═══ */
.social-wall { display: grid; gap: 1px; background: rgba(184, 137, 85, .25); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 880px) { .social-wall { grid-template-columns: repeat(5, 1fr); } }
.social-wall figure { margin: 0; position: relative; overflow: hidden; background: var(--espresso); }
.social-wall img { aspect-ratio: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux), opacity .8s; opacity: .85; }
.social-wall figcaption {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; text-align: center;
  background: rgba(23, 21, 19, .68); color: var(--cream); padding: 1rem;
  opacity: 0; transition: opacity .5s var(--ease-out); z-index: 2;
}
.social-wall figcaption b { font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.social-wall figcaption small { font-family: var(--serif); font-style: italic; font-size: .95rem; }
.social-wall figure:hover img { transform: scale(1.07); }
.social-wall figure:hover figcaption { opacity: 1; }

/* ═══ Dark section shared header row ═══ */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.2rem, 5vw, 4rem); }

/* ════════════════════════════════════════
   Interior pages
   ════════════════════════════════════════ */

/* Page hero (interior) */
.page-hero { position: relative; min-height: clamp(26rem, 60vh, 38rem); display: grid; align-items: end; overflow: hidden; color: var(--cream); background: var(--charcoal); }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(10deg, rgba(23,21,19,.92) 12%, rgba(36,21,13,.45) 60%, rgba(36,21,13,.3)); }
.page-hero-inner { position: relative; z-index: 2; padding-block: 0 clamp(2.4rem, 5vw, 4rem); }
.page-hero h1 { font-size: var(--fs-h1); color: var(--white); max-width: 18ch; }
.page-hero .lead { color: rgba(245,239,231,.75); }
.breadcrumbs { display: flex; gap: .7rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,239,231,.55); margin-bottom: 1.2rem; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs .sep { color: var(--bronze); }

/* Product listing */
.filters-bar { position: sticky; top: 0; z-index: 20; background: rgba(250, 247, 242, .95); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.filters-row { display: flex; gap: .7rem; align-items: center; overflow-x: auto; padding-block: 1rem; scrollbar-width: none; }
.filters-row::-webkit-scrollbar { display: none; }
.chip {
  padding: .62em 1.5em; border: 1px solid var(--line); border-radius: 99px;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; transition: color .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.chip:hover { border-color: var(--bronze); color: var(--brown); }
.chip.active { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.filters-row .grow { flex: 1; }
.filter-search { display: flex; gap: 0; align-items: center; border-bottom: 1px solid var(--line); min-width: 12rem; }
.filter-search input { border: 0; background: none; padding: .55em .2em; width: 9rem; font: inherit; font-size: .85rem; }
.filter-search input:focus { outline: none; }

.product-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3.4rem); }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-grid .flavor-card { grid-auto-columns: auto; }
.product-grid .flavor-card.is-hidden { display: none; }
.grid-empty { grid-column: 1/-1; text-align: center; padding: 4rem 1rem; color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 1.3rem; border: 1px dashed var(--line); }

/* About / story sections */
.story-media { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
.story-media .big { grid-column: 1 / -1; }
.story-media img {aspect-ratio: 4/3.4; object-fit: cover; width: 100%; border: 1px solid var(--line-dark);}
.story .num-block { font-family: var(--serif); font-size: clamp(4rem, 9vw, 7rem); line-height: 1; color: rgba(197,154,98,.28); display: block; margin-bottom: -0.4em; }
.quote-mark { font-family: var(--serif); font-size: clamp(5rem, 10vw, 9rem); line-height: .6; color: rgba(197,154,98,.4); display: block; }

/* Blog magazine */
.mag-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 880px) { .mag-grid { grid-template-columns: repeat(3, 1fr); } .mag-grid .mag-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: end; } }
.mag-lead .post-img { aspect-ratio: 16/9; }
.tag-list { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Article */
.article-hero { min-height: clamp(30rem, 72vh, 44rem); }
.article-body { max-width: 46rem; font-size: 1.06rem; line-height: 1.9; display: grid; gap: 1.5rem; }
.article-body h2 { font-size: var(--fs-h2); margin-top: 1.4rem; }
.article-body .dropcap::first-letter {
  font-family: var(--serif); float: inline-start; font-size: 4.2rem; line-height: .8;
  padding-inline-end: .5rem; padding-top: .25rem; color: var(--brown); font-weight: 500;
}
.article-body figure { margin: 0; }
.article-body figure img { width: 100%; }
.article-body figcaption { font-size: .78rem; color: var(--ink-soft); padding-top: .6rem; font-style: italic; }
.pull-quote {
  font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.25;
  border-inline-start: 2px solid var(--bronze); padding-inline-start: 1.6rem; color: var(--brown2);
}

/* Contact */
.contact-map { position: relative; border: 1px solid var(--line); min-height: 20rem; background:
  repeating-linear-gradient(45deg, rgba(104,59,17,.05) 0 2px, transparent 2px 12px), var(--beige);
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); }
.contact-map .pin { grid-column: 3; grid-row: 3; justify-self: center; align-self: center; width: 18px; height: 18px; background: var(--brown); border-radius: 50%; box-shadow: 0 0 0 10px rgba(104,59,17,.15), 0 0 0 22px rgba(104,59,17,.07); animation: pinPulse 2.6s ease-out infinite; }
@keyframes pinPulse { 50% { box-shadow: 0 0 0 16px rgba(104,59,17,.12), 0 0 0 34px rgba(104,59,17,.04); } }
.map-road { position: absolute; inset: 0; }
.contact-cards { display: grid; gap: 1.6rem; }
@media (min-width: 880px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }

/* Partner */
.partner-aud { display: grid; gap: 1rem; }
@media (min-width: 880px) { .partner-aud { grid-template-columns: repeat(2, 1fr); } }
.aud-row { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.aud-num { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--bronze); line-height: 1; }

/* Legal */
.legal-body { max-width: 46rem; display: grid; gap: 2rem; font-size: .95rem; line-height: 1.8; }
.legal-body h3 { font-size: 1.35rem; margin-top: 1.4rem; }

/* 404 */
.err-hero { min-height: 100svh; display: grid; place-items: center; text-align: center; color: var(--cream); position: relative; overflow: hidden; }
.err-hero .leaf-mark { width: min(72vw, 500px); color: var(--gold); opacity: .06; inset: auto auto -20% 4%; }
.err-code { font-family: var(--serif); font-size: clamp(7rem, 24vw, 15rem); line-height: .9; color: var(--white); }

/* Video placeholder */
.video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line-dark); background: var(--espresso); display: grid; place-items: center; }
.video-frame > img.inset { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: transform 1.4s var(--ease-lux); }
.video-frame:hover > img.inset { transform: scale(1.04); }