/* ============================================================
   MESA 2026 – OPTION B · Inner pages (shared)
   Page hero · menu grid · store locator · about/awards ·
   franchise · careers · news · contact · forms
   ============================================================ */

/* Active nav state */
.site-nav__link.is-active { color: var(--primary); font-weight: 600; }

/* ================= PAGE HERO ================= */
.page-hero {
  padding-block: var(--section-space-s) var(--section-space-m);
  text-align: center;
  overflow: hidden;
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}
.page-hero__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}
.page-hero__title { font-size: var(--display); line-height: 1.05; }
.page-hero__title em { font-style: italic; color: var(--primary); }
.page-hero__lead {
  max-width: 56ch;
  font-size: var(--text-l);
  color: var(--text-dark-muted);
}
.page-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-xs);
}
.page-hero__ctas .btn { min-width: 22rem; }

@media (max-width: 575px) {
  .page-hero__ctas { width: 100%; flex-direction: column; }
  .page-hero__ctas .btn { width: 100%; min-width: 0; }
}

/* Eyebrow chip (same recipe as homepage) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--primary-trans-30);
  border-radius: var(--radius-round);
  background: var(--primary-trans-5);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  line-height: 1;
}
.eyebrow i {
  width: 0.8rem; height: 0.8rem;
  border-radius: var(--radius-round);
  background: var(--primary);
  font-style: normal;
}

/* ================= MENU GRID ================= */
.menu-section { padding-block: 0 var(--section-space-l); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}

.menu-card {
  position: relative;
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  color: var(--text-light);
}
/* The first card spans the full row from 576px up (see the media queries
   below the grid rules) and is a little taller than a standard tile. With 13
   live categories that leaves 12 tiles, which fill whole rows at both 3 and 2
   columns. If the category count changes, recheck the last row for an orphan. */
.menu-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.menu-card:hover img { transform: scale(1.05); }
.menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, hsl(23 70% 8% / 0.85));
}
.menu-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m);
}
.menu-card__name {
  font-family: var(--font-display);
  font-size: var(--h4);
  font-weight: 600;
  color: var(--text-light);
}
.menu-card__tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--accent-letter-spacing);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
  line-height: 1;
}
.menu-card__arrow {
  display: grid;
  place-items: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: var(--radius-round);
  background: var(--primary);
  color: var(--text-light);
  font-size: var(--text-l);
  transition: var(--transition);
}
.menu-card:hover .menu-card__arrow { transform: translateX(4px); background: var(--primary-hover); }

.menu-note {
  margin-top: var(--space-l);
  margin-inline: auto;
  text-align: center;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
.menu-note a { font-weight: 700; color: var(--secondary); }

@media (max-width: 991px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .menu-grid { grid-template-columns: 1fr; }
}
/* First card: full row wherever the grid is multi-column. The aspect ratios
   make it about a third taller than a standard 4:3 tile at each column count
   (2 columns: 2:1 over the full row; 3 columns: 3:1). Mobile is untouched. */
@media (min-width: 576px) {
  .menu-grid > .menu-card:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
}
@media (min-width: 992px) {
  .menu-grid > .menu-card:first-child { aspect-ratio: 3 / 1; }
}

/* ================= VIDEO STRIP (dark) ================= */
.video-strip { padding-block: var(--section-space-l); }
.video-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}
.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--secondary), var(--tertiary-dark));
}
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.video-card__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 8rem; height: 8rem;
  border-radius: var(--radius-round);
  background: var(--primary);
  color: var(--text-light);
  font-size: 2.4rem;
  transition: var(--transition);
  box-shadow: var(--shadow-glow-primary);
}
.video-card:hover .video-card__play { transform: scale(1.1); }

@media (max-width: 991px) {
  .video-strip__inner { grid-template-columns: 1fr; }
}

/* ================= STORE LOCATOR ================= */
.locator { padding-block: 0 var(--section-space-l); }
.locator__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--space-l);
  align-items: start;
}

.locator__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
}
.chip {
  padding: 1rem 1.8rem;
  border: 1px solid var(--base-trans-20);
  border-radius: var(--radius-round);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
  cursor: pointer;
  transition: var(--transition);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.is-active { background: var(--tertiary); border-color: var(--tertiary); color: var(--text-light); }

.locator__search { position: relative; margin-bottom: var(--space-s); }
.locator__search .input { padding-left: 4.6rem; }
.locator__search::before {
  content: "⌕";
  position: absolute;
  left: 1.8rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  font-size: 2.2rem;
  color: var(--primary);
}

.store-list { display: flex; flex-direction: column; gap: var(--space-s); }
.store-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-l);
  transition: var(--transition);
}
.store-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-m); transform: translateY(-2px); }
.store-card__arch {
  width: 5.2rem; height: 6rem;
  border-radius: var(--radius-round) var(--radius-round) var(--radius-xs) var(--radius-xs);
  background: linear-gradient(180deg, var(--accent-light), var(--primary));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-light);
  font-size: var(--text-l);
}
.store-card__body { display: flex; flex-direction: column; gap: 0.5rem; }
.store-card__name { font-family: var(--font-body); font-size: var(--text-m); font-weight: 700; }
.store-card__address { font-size: var(--text-s); color: var(--text-dark-muted); max-width: 42ch; }
.store-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--secondary);
  font-weight: 600;
}
.store-card__meta .badge {
  padding: 0.4rem 1rem;
  background: var(--accent-trans-20);
  border-radius: var(--radius-round);
  color: var(--secondary-dark);
  line-height: 1.4;
}

.map-panel {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  border-radius: var(--radius-l);
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 70% 20%, var(--tertiary-trans-20), transparent 60%),
    var(--bg-semi-light);
  border: var(--border);
  min-height: 56rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-l);
}
.map-panel__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-width: 30ch; }
.map-panel__pin { width: 4.4rem; height: auto; filter: drop-shadow(0 6px 12px var(--primary-trans-40)); }
.map-panel__count { font-family: var(--font-display); font-size: var(--h1); font-weight: 700; color: var(--primary); line-height: 1; }
.map-panel__note { font-size: var(--text-s); color: var(--text-dark-muted); }

@media (max-width: 991px) {
  .locator__grid { grid-template-columns: 1fr; }
  .map-panel { position: static; min-height: 32rem; }
}

/* ================= ABOUT ================= */
.about-story { padding-block: 0 var(--section-space-l); }
.about-story__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-story__media { position: relative; }
.about-story__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-story__year {
  position: absolute;
  left: -4%;
  bottom: 8%;
  padding: 1.6rem 2.4rem;
  background: var(--primary);
  color: var(--text-light);
  border-radius: var(--radius-m);
  font-family: var(--font-display);
  font-size: var(--h4);
  font-weight: 700;
  box-shadow: var(--shadow-l);
}

.leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.leader-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-l);
}
.leader-card__role {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--accent-letter-spacing);
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
}
.leader-card__name { font-family: var(--font-display); font-size: var(--h5); font-weight: 600; }
.leader-card__bio { font-size: var(--text-s); color: var(--text-dark-muted); }

.awards { padding-block: var(--section-space-l); }
.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
.award-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: hsl(33 60% 97% / 0.06);
  border: 1px solid hsl(33 60% 97% / 0.12);
  border-radius: var(--radius-round) var(--radius-round) var(--radius-l) var(--radius-l);
}
.award-card__icon { font-size: 3.2rem; line-height: 1; }
.award-card__title { font-family: var(--font-display); font-size: var(--h5); color: var(--text-light); }
.award-card__by { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light-muted); }

@media (max-width: 991px) {
  .about-story__grid { grid-template-columns: 1fr; }
  .awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .leader-grid, .awards__grid { grid-template-columns: 1fr; }
}

/* ================= FRANCHISE ================= */
.steps { padding-block: var(--section-space-m) var(--section-space-l); }
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
}
.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--bg-ultra-light);
  border: var(--border);
}
.step-card__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--h2);
  color: var(--primary);
  line-height: 1;
}
.step-card__title { font-size: var(--text-m); font-weight: 700; }
.step-card__desc { font-size: var(--text-s); color: var(--text-dark-muted); }

@media (max-width: 991px) { .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .steps__grid { grid-template-columns: 1fr; } }

/* ================= CAREERS ================= */
.positions { padding-block: 0 var(--section-space-l); }
.positions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
}
.position-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-m);
  color: var(--text-dark);
  font-weight: 600;
  transition: var(--transition);
}
.position-card::after { content: "→"; color: var(--primary); transition: transform var(--duration-fast) ease; }
.position-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-m); color: var(--text-dark); }
.position-card:hover::after { transform: translateX(4px); }

@media (max-width: 991px) { .positions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .positions__grid { grid-template-columns: 1fr; } }

/* ================= NEWS ================= */
.news-archive { padding-block: 0 var(--section-space-l); }

.news-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-l);
  align-items: center;
  margin-bottom: var(--space-xl);
  padding: var(--space-m);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-xl);
}
.news-featured__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-l); }
.news-featured__body { display: flex; flex-direction: column; gap: var(--space-s); padding-inline: var(--space-s); }
.news-featured__title { font-size: var(--h3); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
.news-tile { display: flex; flex-direction: column; gap: var(--space-s); }
.news-tile__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: var(--radius-l); transition: var(--transition); }
.news-tile:hover .news-tile__img { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.news-tile__meta {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
}
.news-tile__title { font-size: var(--h5); }

@media (max-width: 991px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) { .news-grid { grid-template-columns: 1fr; } }

/* ================= CONTACT ================= */
/* Default: no top padding (follows .page-hero, which already pads below).
   Pages that set an explicit pad-section utility keep their own top padding. */
.contact:not([class*="pad-section"]) { padding-block: 0 var(--section-space-l); }
.contact__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
  align-items: start;
}
.contact__info { display: flex; flex-direction: column; gap: var(--space-m); }
.info-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--bg-ultra-light);
  border: var(--border);
}
.info-block__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--accent-letter-spacing);
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
}
.info-block p, .info-block a { font-size: var(--text-s); color: var(--text-dark-muted); }
.info-block a { display: block; }
.info-block a:hover { color: var(--primary); }

/* ================= FORMS ================= */
.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-xl);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dark-muted); }
.input, .select, .textarea {
  width: 100%;
  padding: 1.4rem 1.8rem;
  font-size: var(--text-s);
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg-light);
  border: var(--border);
  border-radius: var(--radius-m);
  transition: border-color var(--duration-fast) ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); }
.textarea { min-height: 14rem; resize: vertical; }
.form-consent { display: flex; gap: 1rem; align-items: flex-start; font-size: var(--text-xs); color: var(--text-dark-muted); }
.form-consent input { margin-top: 0.3rem; accent-color: var(--primary); }
.form-card .btn { align-self: flex-start; min-width: 22rem; }

@media (max-width: 991px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .form-row { grid-template-columns: 1fr; }
  .form-card .btn { width: 100%; min-width: 0; }
}

/* ================= SHARED SECTION HEAD spacing on inner pages ==== */
.section-head--tight { margin-bottom: var(--space-m); }

/* ================= SINGLES: SHARED ================= */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--secondary);
}
.back-link::before { content: "←"; transition: transform var(--duration-fast) ease; }
.back-link:hover::before { transform: translateX(-4px); }
.dish-section__back { margin-bottom: var(--space-m); }

.banner { padding-block: 0; }
.banner__img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--radius-l);
}

.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.share-row__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}
.share-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--base-trans-20);
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dark);
  transition: var(--transition);
}
.share-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

/* ================= SINGLE: MENU CATEGORY ================= */
.dish-section { padding-block: var(--section-space-m) var(--section-space-l); }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}

.dish-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: var(--transition);
}
.dish-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--primary-light); }
.dish-item__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.dish-item__badge {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-round);
  background: var(--primary);
  color: var(--text-light);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.dish-item__badge--best { background: var(--secondary); }
.dish-item__badge--try { background: var(--tertiary); }
.dish-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  flex: 1;
}
.dish-item__name { font-family: var(--font-display); font-size: var(--h5); font-weight: 600; }
.dish-item__desc { font-size: var(--text-s); color: var(--text-dark-muted); flex: 1; }
.dish-item__prices {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--space-xs);
  padding-top: var(--space-s);
  border-top: 1px dashed var(--border-color-light);
}
.dish-item__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-s);
}
.dish-item__size { color: var(--text-dark-muted); }
.dish-item__price { font-weight: 700; color: var(--secondary); }

.subcat-head {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: var(--space-xl) 0 var(--space-m);
}
.subcat-head h2 { font-size: var(--h3); white-space: nowrap; }
.subcat-head::after { content: ""; flex: 1; height: 1px; background: var(--border-color-light); }

@media (max-width: 991px) { .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .dish-grid { grid-template-columns: 1fr; } }

/* ================= SINGLE: NEWS ARTICLE ================= */
.article-hero { padding-block: var(--section-space-s) var(--space-l); text-align: center; }
.article-hero__inner {
  max-width: var(--container-width-narrow);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}
.article-hero__title { font-size: var(--h1); }
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}
.article-hero__meta strong { color: var(--primary); }

.article-figure { padding-block: 0; }
.article-figure img {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.article-body { padding-block: var(--space-xl) var(--section-space-l); }
.article-prose {
  max-width: 72rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.article-prose p { font-size: var(--text-m); color: var(--text-dark-muted); max-width: none; }
.article-prose h2 { font-size: var(--h4); margin-top: var(--space-s); }
.article-prose blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--secondary);
  border-left: 3px solid var(--primary);
  padding-left: var(--space-m);
  margin-block: var(--space-s);
}
.article-prose ul { padding-left: 2rem; color: var(--text-dark-muted); display: flex; flex-direction: column; gap: 0.8rem; }
.article-prose .share-row { margin-top: var(--space-m); padding-top: var(--space-m); border-top: var(--border); }

.related { padding-block: var(--section-space-m); }

/* ================= SINGLE: CAREER ================= */
.job { padding-block: 0 var(--section-space-l); }
.job__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: var(--space-xl);
  align-items: start;
}
.job__main { display: flex; flex-direction: column; gap: var(--space-l); }

.job-list { display: flex; flex-direction: column; gap: var(--space-s); list-style: none; }
.job-list li {
  position: relative;
  padding-left: 3.4rem;
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}
.job-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-round);
  background: var(--accent-trans-20);
  color: var(--secondary);
  font-size: 1.2rem;
  font-weight: 700;
}

.sidebar-card {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-l);
}
.sidebar-card__title {
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}
.opening-list { display: flex; flex-direction: column; }
.opening-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 1.2rem;
  border-bottom: 1px dashed var(--border-color-light);
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--text-dark);
}
.opening-list a::after { content: "→"; color: var(--primary); }
.opening-list a:hover { color: var(--primary); }
.opening-list a:last-child { border-bottom: 0; }

.file-input { padding: 1.1rem 1.8rem; }
.file-input::file-selector-button {
  margin-right: 1.2rem;
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--tertiary);
  color: var(--text-light);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 991px) {
  .job__grid { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }
}

/* ============================================================
   STICKY MENU CATEGORY SWITCHER  ·  .cat-switch
   Single menu category page. A floating pill rail that lets you
   hop straight to another category instead of returning to the
   menu landing page. Lives as the first child of
   .dish-section > .container, so it stays stuck for the whole
   dish listing, and parks below the sticky .site-header using
   the shared --header-height token.
   Behaviour (edge fades, active-chip centering, stuck state):
   pages.js → "Sticky menu-category switcher".
   ============================================================ */

.cat-switch {
  /* component knobs */
  --cat-switch-fade: 2.8rem;                      /* edge-fade width */
  --cat-switch-fade-start: 0rem;                  /* toggled by pages.js */
  --cat-switch-fade-end: var(--cat-switch-fade);  /* toggled by pages.js */
  --cat-switch-pad: 0.7rem;
  /* same cream as .site-header, translucent for the blurred stuck state */
  --cat-switch-surface-stuck: hsl(35 60% 98% / 0.92);

  position: sticky;
  top: calc(var(--header-height) + var(--space-s));
  z-index: var(--z-raised);
  margin-bottom: var(--space-l);
}

.cat-switch__inner {
  display: flex;
  align-items: center;
  gap: var(--cat-switch-pad);
  padding: var(--cat-switch-pad);
  background: var(--bg-ultra-light);
  border: var(--border);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-m);
  transition: background-color var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

.cat-switch.is-stuck .cat-switch__inner {
  background: var(--cat-switch-surface-stuck);
  border-color: var(--primary-trans-20);
  box-shadow: var(--shadow-l);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* The "All categories" escape hatch used to be pinned inside this bar.
   It moved out to a plain .back-link above the switcher: its 2x2 glyph
   was indistinguishable from the grid/list toggle's, so two unrelated
   controls read as a pair. */

.cat-switch__rule {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin-block: 0.6rem;
  background: var(--border-color-light);
}

/* --- Horizontally scrolling rail --- */
.cat-switch__rail {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  /* keeps a tabbed-to chip clear of the fade zone */
  scroll-padding-inline: var(--cat-switch-fade);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--cat-switch-fade-start),
    #000 calc(100% - var(--cat-switch-fade-end)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--cat-switch-fade-start),
    #000 calc(100% - var(--cat-switch-fade-end)), transparent 100%);
}
.cat-switch__rail::-webkit-scrollbar { display: none; }

.cat-switch__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  padding-inline: 0.4rem;
  list-style: none;
}

/* --- Chips --- */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  padding-inline: 1.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dark-muted);
  transition: background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}
.cat-chip:hover {
  background: var(--accent-trans-20);
  border-color: var(--accent-trans-30);
  color: var(--secondary);
}
.cat-chip:active { background: var(--accent-trans-30); color: var(--secondary); }
/* inset ring: the rail clips anything drawn outside its box */
.cat-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }

/* Signature / ambassador categories carry a small diamond, a nod to
   the brand sparkle. Empty content keeps it out of the a11y tree. */
.cat-chip--marked::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--primary);
  transform: rotate(45deg);
}

/* Category you are currently reading */
.cat-chip[aria-current="page"] {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--text-light);
  font-weight: 700;
  cursor: default;
}
.cat-chip[aria-current="page"]:hover {
  background: var(--tertiary-hover);
  border-color: var(--tertiary-hover);
  color: var(--text-light);
}
.cat-chip[aria-current="page"]::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-round);
  background: var(--primary);
  transform: none;
}

@media (max-width: 767px) {
  .cat-switch {
    top: calc(var(--header-height) + var(--space-xs));
    margin-bottom: var(--space-m);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-switch__inner, .cat-chip { transition: none; }
}

/* ============================================================
   GRID / LIST VIEW TOGGLE  ·  .view-toggle
   Client request (suggestions deck, item 7): let people switch
   between visual browsing and a denser detail list.

   Rides along in .cat-switch__inner so it inherits the sticky
   bar and stays reachable the whole way down a long category.
   The choice is stored in localStorage and applied to <html> by
   an inline head script, so it carries across category pages
   without a flash. Behaviour: pages.js → "Grid / list view".
   ============================================================ */

.view-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
}

.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  padding-inline: 1.6rem;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-dark-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}
.view-toggle__btn:hover { background: var(--base-trans-5); color: var(--text-dark); }
.view-toggle__btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: -3px; }
.view-toggle__btn[aria-pressed="true"] {
  background: var(--primary-trans-10);
  color: var(--secondary);
}

/* Glyphs painted with gradients, no extra markup. These are now the
   only 2x2 grid mark on the page. */
.view-toggle__icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background-repeat: no-repeat;
}
.view-toggle__icon--grid {
  background-image:
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-size: 0.55rem 0.55rem;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}
/* Bulleted rows, not three plain bars: plain bars are the burger menu,
   which sits in the header directly above this on mobile. */
.view-toggle__icon--list {
  background-image:
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  background-size:
    0.3rem 0.3rem, 0.9rem 0.3rem,
    0.3rem 0.3rem, 0.9rem 0.3rem,
    0.3rem 0.3rem, 0.9rem 0.3rem;
  background-position:
    0 0.1rem, 100% 0.1rem,
    0 50%, 100% 50%,
    0 calc(100% - 0.1rem), 100% calc(100% - 0.1rem);
}

/* --- List view -------------------------------------------------
   One dish per row: fixed-width thumbnail, then the detail block.

   The body becomes a grid rather than a flex row, because the
   markup emits name, description and prices as three siblings with
   no wrapper. Explicit placement stacks name over description in
   the first column and lets prices span both rows on the right, so
   they line up down the page and stay scannable. */
.menu-view-list .dish-grid { grid-template-columns: 1fr; gap: var(--space-s); }

.menu-view-list .dish-item {
  flex-direction: row;
  align-items: stretch;
  /* Gives short rows (no description) a comfortable height and
     something for the stretched thumbnail to fill. */
  min-height: 14rem;
}
.menu-view-list .dish-item:hover { transform: none; box-shadow: var(--shadow-m); }

.menu-view-list .dish-item__img {
  flex: none;
  width: clamp(12rem, 8rem + 9vw, 20rem);
  height: auto;
  align-self: stretch;
  aspect-ratio: auto;
}

.menu-view-list .dish-item__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-m);
  row-gap: 0.4rem;
  padding: var(--space-s) var(--space-m);
}

.menu-view-list .dish-item__name { grid-column: 1; grid-row: 1; }
.menu-view-list .dish-item__desc { grid-column: 1; grid-row: 2; flex: none; }
.menu-view-list .dish-item__prices {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 15rem;
  margin-top: 0;
  padding-top: 0;
  padding-left: var(--space-m);
  border-top: 0;
  border-left: 1px dashed var(--border-color-light);
}

/* Below 900px the row keeps its thumbnail but the detail block
   collapses to a single column, otherwise the price column
   squeezes the description to a few words per line. */
@media (max-width: 899px) {
  .menu-view-list .dish-item { min-height: 12rem; }
  .menu-view-list .dish-item__body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: var(--space-xs);
  }
  .menu-view-list .dish-item__name,
  .menu-view-list .dish-item__desc,
  .menu-view-list .dish-item__prices { grid-column: 1; grid-row: auto; }
  .menu-view-list .dish-item__prices {
    min-width: 0;
    padding-left: 0;
    padding-top: var(--space-s);
    border-left: 0;
    border-top: 1px dashed var(--border-color-light);
  }
}

@media (max-width: 767px) {
  /* icon-only toggle, labels kept for assistive tech. Glyph sizes stay
     at their desktop values so the bullet-and-line proportions hold. */
  .view-toggle__btn { padding-inline: 0; min-width: 4.4rem; justify-content: center; }
  .view-toggle__label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-toggle__btn { transition: none; }
}