/**
 * Catering page — PDF pp.18-21. (Distinct from catering.css, the homepage
 * Catering teaser section — different composition, own class namespace.)
 *
 * RTL: logical properties + DOM-order grid/flex throughout — see about.css
 * header comment for the same policy; verified via the RTL preview mode
 * (MISSING-ASSETS.md).
 */

/* ---- 01 Intro ---- */
.catering-page-intro {
  background: var(--color-noir-temp);
  padding-block: var(--section-pad-y-lg);
  text-align: center;
}
.catering-page-intro__title {
  font-size: clamp(2.5rem, 6vw, var(--fs-6));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark);
  margin: 0 0 var(--space-7);
}
.catering-page-intro__image-frame {
  max-width: 1100px;
  margin-inline: auto;
  border-inline-start: 3px solid var(--color-cherry-temp);
}
.catering-page-intro__image {
  width: 100%;
  height: clamp(280px, 38vw, 560px);
  object-fit: cover;
  display: block;
}
.catering-page-intro__body {
  padding-block-start: var(--space-7);
}
.catering-page-intro__heading {
  /* Wide enough to hold "Elevating Your Cherished Moments" on one line at
     the approved desktop width (PDF p.18) — the shared narrower body-copy
     max-width was wrapping it to two lines. */
  max-width: 44rem;
  margin-inline: auto;
  font-size: clamp(1.75rem, 3vw, var(--fs-4));
  color: var(--color-paper-on-dark);
  margin-block-end: var(--space-5);
}
.catering-page-intro__desc {
  /* Wide enough to read as ~2 lines like the PDF, not 3 — narrower than the
     heading on purpose (body copy wants a shorter line length than a
     display heading). */
  max-width: 38rem;
  margin-inline: auto;
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.75;
  margin-block: 0;
}

/* ---- Packages ---- */
.catering-packages {
  background: var(--color-noir-temp);
  padding-block: var(--section-pad-y-lg);
}
.catering-packages__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: start;
}
.catering-packages__image-frame {
  align-self: stretch;
}
.catering-packages__image {
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 720px;
  object-fit: cover;
  display: block;
}
.catering-packages__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark-soft);
  margin: 0 0 var(--space-6);
}
.catering-package {
  margin-bottom: var(--space-8);
}
.catering-package:last-child {
  margin-bottom: 0;
}
.catering-package__number {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  color: var(--color-copper-temp);
  margin: 0 0 var(--space-2);
}
.catering-package__title {
  font-size: clamp(1.5rem, 2.6vw, var(--fs-3));
  color: var(--color-paper-on-dark);
  margin: 0;
}
.catering-package__rule {
  width: 40px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 2px solid var(--color-cherry-temp);
  margin-block: var(--space-4);
}
.catering-package__body {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 0 var(--space-5);
}
.catering-package__cta {
  display: inline-block;
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  transition: background var(--transition-fast);
}
.catering-package__cta:hover,
.catering-package__cta:focus-visible {
  background: color-mix(in srgb, var(--color-cherry-temp) 85%, black);
}

/* ---- Barista Corner ---- */
.catering-barista {
  background: var(--color-ash);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60svh;
}
.catering-barista__image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}
.catering-barista__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--section-pad-y-lg) var(--space-8);
}
.catering-barista__number {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  color: var(--color-copper-temp);
  margin: 0 0 var(--space-3);
}
.catering-barista__heading {
  font-size: clamp(1.75rem, 3vw, var(--fs-4));
  color: var(--color-paper-on-dark);
  margin: 0;
}
.catering-barista__rule {
  width: 40px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 1px solid var(--color-line-on-dark);
  margin-block: var(--space-5);
}
.catering-barista__body {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.75;
  max-width: 30rem;
  margin: 0;
}

/* ---- Wedding Table ---- */
.catering-wedding {
  background: var(--color-cherry-temp);
  padding-block: var(--section-pad-y-lg);
}
.catering-wedding__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-8);
  align-items: center;
}
.catering-wedding__image {
  width: 100%;
  height: clamp(320px, 34vw, 560px);
  object-fit: cover;
  display: block;
}
.catering-wedding__number {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  color: var(--color-copper-temp);
  margin: 0 0 var(--space-3);
}
.catering-wedding__heading {
  font-size: clamp(2rem, 3.4vw, var(--fs-4));
  color: var(--color-paper-on-dark);
  margin: 0;
}
.catering-wedding__rule {
  width: 40px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 1px solid var(--color-line-on-dark);
  margin-block: var(--space-5);
}
.catering-wedding__body {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.75;
  max-width: 32rem;
  margin: 0 0 var(--space-6);
}
.catering-wedding__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.catering-wedding__badge {
  display: inline-block;
  border: 1px solid var(--color-copper-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-000);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
}
.catering-wedding__catalogue-cta {
  display: inline-block;
  background: var(--color-paper-on-dark);
  color: var(--color-cherry-temp);
  font-family: var(--font-ui);
  font-size: var(--fs-000);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  transition: opacity var(--transition-fast);
}
.catering-wedding__catalogue-cta:hover,
.catering-wedding__catalogue-cta:focus-visible {
  opacity: 0.85;
}

/* ---- Bottom contact bar ---- */
.catering-page-bottom {
  background: var(--color-cream);
  padding-block: var(--space-8);
  text-align: center;
}
.catering-page-bottom__heading {
  font-size: clamp(1.5rem, 2.4vw, var(--fs-3));
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}
.catering-page-bottom__contact {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cherry-temp);
  margin: 0;
}
.catering-page-bottom__contact a {
  color: var(--color-cherry-temp);
  border-bottom: 1px solid currentColor;
}

@media (max-width: 900px) {
  .catering-packages__grid,
  .catering-wedding__grid {
    grid-template-columns: 1fr;
  }
  .catering-barista {
    grid-template-columns: 1fr;
  }
}

/* Client feedback: mobile typography still slightly large — small further
   reduction, not a redesign. */
@media (max-width: 640px) {
  .catering-page-intro__title {
    font-size: clamp(2.2rem, 6vw, var(--fs-6));
  }
}

/* Client feedback, round 2: still slightly large — one further ~5% pass.
   Desktop (the var(--fs-X) ceiling) is untouched either way. */
@media (max-width: 640px) {
  .catering-page-intro__title {
    font-size: clamp(2.09rem, 6vw, var(--fs-6));
  }
}