/* Gellatodiamor — Section layout & components */

/* ===== Hero — Full-bleed ===== */
.hero-fullbleed {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-fullbleed .hero-bg {
  position: absolute;
  inset: 0;
}
.hero-fullbleed .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(0.2 0.04 145 / 0.35) 0%, transparent 35%, transparent 55%, oklch(0.2 0.04 145 / 0.85) 100%),
    linear-gradient(90deg, oklch(0.2 0.04 145 / 0.55) 0%, transparent 50%);
}
.hero-fullbleed .hero-overlay {
  position: relative;
  width: 100%;
  z-index: 2;
  padding: 80px 0 56px;
  color: var(--milk);
}
.hero-fullbleed .hero-content { max-width: 920px; }
.hero-fullbleed .hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.92 0.02 130);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.hero-fullbleed .hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pistachio);
}
.hero-fullbleed .hero-h { color: var(--milk); }
.hero-fullbleed .hero-h em { color: var(--pistachio); }
.hero-fullbleed .hero-sub {
  color: oklch(0.92 0.02 130);
  margin-top: 28px;
  max-width: 560px;
}
.hero-fullbleed .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.hero-fullbleed .hero-cta .btn-primary {
  background: var(--milk);
  color: var(--ink);
}
.hero-fullbleed .hero-cta .btn-primary:hover { background: var(--pistachio); }
.hero-fullbleed .hero-cta .btn-ghost {
  background: transparent;
  color: var(--milk);
  border-color: oklch(0.92 0.02 130 / 0.3);
}
.hero-fullbleed .hero-cta .btn-ghost:hover {
  background: oklch(0.92 0.02 130 / 0.1);
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid oklch(0.92 0.02 130 / 0.18);
  max-width: 720px;
}
.hero-meta div {
  display: flex; flex-direction: column; gap: 6px;
}
.hero-meta .label-mono {
  color: oklch(0.85 0.03 145);
}
.hero-meta strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  color: var(--milk);
  line-height: 1;
}
@media (max-width: 760px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .hero-fullbleed { min-height: 80vh; }
}

/* ===== Hero — Split ===== */
.hero-split { padding: 56px 0 0; }
.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 48px;
  align-items: center;
  min-height: 80vh;
  padding-bottom: 64px;
}
.hero-split .hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 28px;
}
.hero-split .hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.hero-split .hero-img {
  aspect-ratio: 4/5;
  border-radius: 12px;
}
.hero-split .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 880px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Hero — Typo ===== */
.hero-typo { padding: 80px 0 0; }
.hero-typo .hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.hero-typo .hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.hero-typo-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-typo-h .it { font-style: italic; color: var(--sage-deep); margin-left: 6vw; }
.hero-typo-h .bullet { color: var(--sage); margin: 0 0.2em; }
.hero-typo-h span:last-child {
  font-size: 0.32em;
  letter-spacing: 0.02em;
  margin-top: 16px;
  font-style: italic;
  color: var(--ink-mute);
}
.hero-typo-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  margin-top: 56px;
  align-items: end;
}
.hero-typo-foot .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-typo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 56px;
  padding-bottom: 80px;
}
@media (max-width: 760px) {
  .hero-typo-foot { grid-template-columns: 1fr; }
  .hero-typo-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Section head ===== */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 64px;
}
.section-head .eyebrow { margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

/* ===== Flavors ===== */
.flavors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.flavor-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flavor-img {
  aspect-ratio: 4/5;
  border-radius: 8px;
  transition: transform 0.4s ease;
}
.flavor-card:hover .flavor-img {
  transform: scale(1.02);
}
.flavor-meta { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.flavor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}
.flavor-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.flavors-foot {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
@media (max-width: 880px) { .flavors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flavors-grid { grid-template-columns: 1fr; } }

/* ===== Story (deep section) ===== */
.section-deep {
  background: var(--bg-deep);
  color: var(--milk);
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 80px;
  align-items: start;
}
.story-text { padding-top: 12px; }
.story-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid oklch(0.85 0.02 145 / 0.15);
}
.story-num {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--pistachio);
  font-style: italic;
  margin-bottom: 8px;
}
.story-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.story-img-1 { aspect-ratio: 3/4; grid-row: 1; transform: translateY(40px); }
.story-img-2 { aspect-ratio: 3/4; grid-row: 1; }
@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .story-img-1 { transform: none; }
}

/* ===== Summer feature ===== */
.section-summer { background: var(--bg-alt); }
.summer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.summer-img { aspect-ratio: 4/5; }
.summer-list {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
}
.summer-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-soft);
}
.summer-list li:last-child { border-bottom: 1px solid var(--line); }
.summer-list .label-mono { color: var(--berry); }
@media (max-width: 880px) {
  .summer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== App pitch ===== */
.section-app {
  background: var(--bg-deep);
  color: var(--milk);
  overflow: hidden;
}
.app-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 80px;
  align-items: center;
}
.app-text .h-section { color: var(--milk); }
.app-text .h-section em { color: var(--apricot); }
.app-text .body-lg { color: oklch(0.88 0.02 145); }
.app-text .eyebrow { color: oklch(0.85 0.04 130); }
.app-text .eyebrow .dot { background: var(--apricot); }
.app-perks {
  list-style: none;
  margin-top: 32px;
  display: grid;
  gap: 14px;
}
.app-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: oklch(0.92 0.02 130);
}
.app-perks svg {
  color: var(--apricot);
  flex-shrink: 0;
}
.app-text .btn-primary { background: var(--milk); color: var(--ink); }
.app-text .btn-primary:hover { background: var(--apricot); }
.app-text .btn-ghost {
  background: transparent;
  color: var(--milk);
  border-color: oklch(0.92 0.02 130 / 0.25);
}

/* Phone mockup */
.app-mockup {
  display: flex;
  justify-content: center;
}
.phone {
  width: 320px;
  height: 640px;
  background: var(--ink);
  border-radius: 44px;
  padding: 12px;
  position: relative;
  box-shadow:
    0 40px 100px oklch(0 0 0 / 0.4),
    inset 0 0 0 2px oklch(0.4 0.03 145);
}
.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 26px;
  background: oklch(0.15 0.02 145);
  border-radius: 16px;
  z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: linear-gradient(180deg, oklch(0.32 0.05 145), oklch(0.22 0.04 145));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone-top { padding: 56px 24px 20px; }
.phone-stamps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 24px;
}
.stamp {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed oklch(0.85 0.02 145 / 0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(0.85 0.02 145);
}
.stamp.filled {
  background: var(--pistachio);
  color: var(--ink);
  border-color: var(--pistachio);
  border-style: solid;
}
.phone-card {
  margin: 0 16px;
  background: oklch(0.94 0.02 80);
  border-radius: 20px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 12px 30px oklch(0 0 0 / 0.3);
}
.phone-card-img {
  aspect-ratio: 16/8;
  border-radius: 0;
}
.phone-tabs {
  margin-top: auto;
  padding: 16px 24px 28px;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid oklch(0.5 0.05 145 / 0.4);
}
.phone-tab {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.7 0.04 145);
}
.phone-tab.active {
  background: var(--pistachio);
  color: var(--ink);
}
@media (max-width: 880px) {
  .app-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ===== Locator ===== */
.section-locator { background: var(--bg); }
.locator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.locator-map {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 480px;
  background: var(--bg-alt);
}
.map-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(0.95) brightness(1.05);
  opacity: 0.5;
  display: block;
}
.locator-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pistachio), var(--sage));
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: 1;
}
.map-pins {
  position: absolute; inset: 0;
  z-index: 2;
}
.map-pin {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--milk);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 3px solid var(--milk);
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.25);
}
.locator-list {
  display: flex;
  flex-direction: column;
}
.store-row {
  display: grid;
  grid-template-columns: 32px 1fr auto 14px;
  align-items: center;
  gap: 20px;
  padding: 24px 8px 24px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.store-row:first-child { border-top: 1px solid var(--line); }
.store-row:hover { background: var(--bg-alt); padding-left: 8px; padding-right: 16px; }
.store-id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.store-name {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 4px;
}
.store-meta {
  text-align: right;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.store-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-deep);
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px oklch(0.62 0.08 145 / 0.18);
}
.store-arrow { color: var(--ink-mute); }
@media (max-width: 880px) {
  .locator-grid { grid-template-columns: 1fr; }
  .locator-map { min-height: 320px; }
}

/* ===== Press ===== */
.section-press {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-press .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.press-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.press-card {
  padding: 28px 20px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 220px;
}
.press-q {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
}
.press-src {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 4px;
}
@media (max-width: 880px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .press-grid { grid-template-columns: 1fr; } }

/* ===== Newsletter ===== */
.section-news { background: var(--bg); }
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.section-news .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.news-form-wrap { display: flex; flex-direction: column; gap: 16px; }
.news-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  max-width: 520px;
}
.news-meta {
  margin-top: 4px;
}
.news-thanks {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: oklch(0.62 0.08 145 / 0.12);
  border: 1px solid oklch(0.62 0.08 145 / 0.3);
  border-radius: 12px;
  color: var(--sage-deep);
  max-width: 520px;
}
@media (max-width: 880px) { .news-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ===== Footer ===== */
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid oklch(0.85 0.02 145 / 0.15);
}
.foot-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.foot-social {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid oklch(0.85 0.02 145 / 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  transition: background 0.15s;
}
.foot-social:hover {
  background: var(--pistachio);
  color: var(--ink) !important;
  border-color: var(--pistachio);
}
.foot-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 11px;
}
.foot-bar .label-mono {
  color: oklch(0.7 0.02 145);
}
@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bar { flex-direction: column; gap: 8px; }
}

/* ===== Sub-page hero ===== */
.subhero {
  padding: 80px 0 40px;
  border-bottom: 1px solid var(--line);
}
.subhero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.crumb a { color: var(--ink-mute); }
.crumb a:hover { color: var(--ink); }

/* Tweaks panel hint */
.tw-hint {}