/* ============================================================
   Custom typography refinements — Aroma Espresso Bar
   Goal: warmer, more editorial / hand-crafted feel (less "generic
   AI template" look), richer color story, and a dimensional
   (3D-plaque style) treatment for the hero headline — echoing the
   engraved wooden sign motif already used on the site.
   ============================================================ */

:root{
  /* extra accent hues that live alongside the existing gold primary */
  --ink-espresso: oklch(24% .045 55);
  --ink-espresso-deep: oklch(14% .03 50);
  --accent-clay: oklch(62% .13 45);
  --accent-cream: oklch(93% .03 85);
}

/* ---------- Global heading rhythm ---------- */
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h2{
  color: var(--foreground);
  position: relative;
}

/* thin hand-set rule under section headings, in the accent gold —
   a small "printed menu" flourish instead of flat template text */
h2::after{
  content: "";
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-top: .65rem;
  background: linear-gradient(90deg, var(--primary), transparent);
  border-radius: 2px;
}

/* Emphasis words (e.g. "Catering", "Coffee") get a warm, slightly
   deeper gold than the flat --primary token, plus a soft glow so
   they read as a deliberate accent rather than default link color */
h1 em, h2 em, h3 em{
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 65%, var(--accent-clay) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* ---------- Hero headline: dimensional "carved sign" treatment ---------- */
h1{
  color: var(--accent-cream);
  font-weight: 650;
  text-wrap: balance;
  /* layered shadow: a tight dark contact-shadow for depth, a mid
     shadow for the "extrusion", and a faint warm highlight above —
     reads as engraved / letterpress rather than a flat drop-shadow */
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 2px 0 var(--ink-espresso),
    0 3px 0 var(--ink-espresso),
    0 4px 6px rgba(0,0,0,.55),
    0 10px 18px rgba(0,0,0,.35);
}

/* Slightly lighter, tighter extrusion on small screens so it stays legible */
@media (max-width: 640px){
  h1{
    text-shadow:
      0 1px 0 rgba(255,255,255,.08),
      0 2px 0 var(--ink-espresso),
      0 3px 5px rgba(0,0,0,.5);
  }
}

/* ---------- Hero brand lockup: compact editorial photo-filled lettering ---------- */
.hero-brand-lockup{
  position:relative;
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(3.2rem,8.5vw,7.25rem);
  line-height:.86;
  letter-spacing:.035em;
  font-weight:800;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 22%,rgba(0,0,0,.10) 100%),
    url('/images/catering-live-counters-1920.jpg');
  background-size:cover;
  background-position:center 42%;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.38));
  text-shadow:none;
  isolation:isolate;
  white-space:nowrap;
}

.hero-brand-lockup::before,
.hero-brand-lockup::after{
  content:"AROMA CAFÉ";
  position:absolute;
  inset:0;
  z-index:-1;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-transform:inherit;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  pointer-events:none;
}

.hero-brand-lockup::before{
  -webkit-text-stroke:1.5px rgba(16,195,230,.78);
  transform:translate(-7px,-5px);
}

.hero-brand-lockup::after{
  -webkit-text-stroke:1.2px rgba(224,68,111,.60);
  transform:translate(7px,5px);
}

@supports not (-webkit-text-stroke:1px black){
  .hero-brand-lockup::before{color:rgba(16,195,230,.7);-webkit-text-fill-color:transparent;}
  .hero-brand-lockup::after{color:rgba(224,68,111,.55);-webkit-text-fill-color:transparent;}
}

@media (max-width:640px){
  .hero-brand-lockup{
    font-size:clamp(2.65rem,15vw,4.9rem);
    letter-spacing:.025em;
  }
  .hero-brand-lockup::before{transform:translate(-4px,-3px);}
  .hero-brand-lockup::after{transform:translate(4px,3px);}
}

/* ---------- Hero entrance animation ----------
   "Aroma Café & " (the h1's own box, first) and "Catering" (the <em>
   inside it) each glide in from the left on a tilted 3D plane, the
   emphasised word arriving a beat later so the line builds in two
   waves instead of popping in flat. */
@keyframes heroSlideIn3D{
  0%{
    opacity: 0;
    transform: perspective(900px) translate3d(-90px, 0, -60px) rotateY(22deg) rotateX(4deg);
    filter: blur(2px);
  }
  60%{
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: perspective(900px) translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
    filter: blur(0);
  }
}

h1{
  transform-style: preserve-3d;
  animation: heroSlideIn3D .9s cubic-bezier(.19,.68,.24,1) both;
}

h1 em{
  display: inline-block;
  transform-style: preserve-3d;
  animation: heroSlideIn3D .8s cubic-bezier(.19,.68,.24,1) .3s both;
}

@media (prefers-reduced-motion: reduce){
  h1, h1 em{
    animation: none;
  }
}

/* ---------- Body copy: warmer, less "AI default" gray ---------- */
p{
  color: color-mix(in oklch, var(--foreground) 82%, transparent);
  line-height: 1.65;
}

/* Eyebrow / label tags (Est. 2014 · Patiala, Punjab, section kickers) */
.hero-sign-card + *,
p.uppercase, span.uppercase{
  letter-spacing: .14em;
}

/* ---------- Buttons: give primary CTA a touch of dimension too ---------- */
a.bg-primary, button.bg-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 0 var(--accent-clay),
    0 6px 14px rgba(0,0,0,.35);
}


/* ============================================================
   Catering Glimpses — premium alternating editorial gallery
   ============================================================ */
.catering-glimpses-section{
  position:relative;
  overflow:hidden;
  padding:7.5rem 1.5rem;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 32%),
    linear-gradient(180deg, var(--background), var(--surface));
  border-top:1px solid var(--border);
}
.catering-glimpses-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:100% 34px;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.catering-glimpses-inner{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto}
.catering-glimpses-heading{max-width:760px;margin:0 auto 4.5rem;text-align:center}
.catering-glimpses-eyebrow{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:1.1rem;color:var(--primary-light);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.catering-glimpses-eyebrow span{width:2.2rem;height:1px;background:var(--primary)}
.catering-glimpses-eyebrow b{font-weight:500}
.catering-glimpses-heading h2,.catering-inquiry-copy h3{margin:0;font-family:var(--font-display);color:var(--foreground);font-weight:600;letter-spacing:-.025em;line-height:1.08}
.catering-glimpses-heading h2{font-size:clamp(2.25rem,5vw,4rem)}
.catering-glimpses-heading h2 em,.catering-inquiry-copy h3 em{font-style:italic;color:var(--primary-light)}
.catering-glimpses-heading p{max-width:650px;margin:1.25rem auto 0;color:var(--muted-foreground);line-height:1.8}

/* Two refined pieces per row, with alternating offsets for an editorial / 3D feel. */
.catering-glimpses-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.6rem;row-gap:3.6rem;align-items:start}
.catering-glimpse-card{position:relative;margin:0;overflow:visible;background:transparent;border:0;box-shadow:none;opacity:0;transition:opacity .8s ease,transform .95s cubic-bezier(.2,.75,.2,1)}
.catering-glimpse-card.reveal-from-left{transform:translate3d(-70px,32px,0)}
.catering-glimpse-card.reveal-from-right{transform:translate3d(70px,32px,0)}
.catering-glimpse-card.is-visible{opacity:1;transform:translate3d(0,0,0)}
.catering-glimpse-card:nth-child(2n){margin-top:4rem}
.catering-glimpse-media-button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;text-align:inherit}
.catering-glimpse-image-wrap{position:relative;overflow:hidden;background:#1b1511;border:1px solid color-mix(in oklch, var(--border) 70%, var(--primary) 30%);box-shadow:0 22px 55px rgba(0,0,0,.18);transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s ease}
.catering-glimpse-card:nth-child(4n+1) .catering-glimpse-image-wrap{border-radius:2px 34px 2px 34px}
.catering-glimpse-card:nth-child(4n+2) .catering-glimpse-image-wrap{border-radius:34px 2px 34px 2px}
.catering-glimpse-card:nth-child(4n+3) .catering-glimpse-image-wrap{border-radius:34px 2px 34px 2px}
.catering-glimpse-card:nth-child(4n) .catering-glimpse-image-wrap{border-radius:2px 34px 2px 34px}
.catering-glimpse-image{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.catering-glimpse-media-button:hover .catering-glimpse-image{transform:scale(1.045);filter:saturate(1.06) contrast(1.03)}
.catering-glimpse-media-button:focus-visible{outline:2px solid var(--primary-light);outline-offset:6px;border-radius:8px}
.catering-glimpse-image-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.4));opacity:.65}
.catering-glimpse-number{position:absolute;z-index:2;right:1rem;bottom:1rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(18,12,8,.55);backdrop-filter:blur(8px);color:#fff;font-size:.58rem;letter-spacing:.08em}

/* Videos stay intentionally shorter and quieter visually than the photo cards. */
.catering-glimpse-video-card{align-self:center}
.catering-glimpse-video-card .catering-glimpse-image-wrap{background:#090706;box-shadow:0 18px 45px rgba(0,0,0,.16)}
.catering-glimpse-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#090706}
.catering-glimpse-video-card .catering-glimpse-number{bottom:.8rem}

.catering-inquiry{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:4rem;align-items:center;margin-top:6rem;padding:clamp(2rem,5vw,4rem);border:1px solid color-mix(in oklch, var(--border) 70%, var(--primary) 30%);border-radius:2px 30px 2px 30px;background:radial-gradient(circle at 100% 0%,color-mix(in oklch,var(--primary) 12%,transparent),transparent 35%),color-mix(in oklch,var(--card) 94%,var(--primary) 6%);box-shadow:0 24px 70px rgba(0,0,0,.2)}
.catering-glimpses-eyebrow-left{justify-content:flex-start}
.catering-inquiry-copy h3{font-size:clamp(2rem,4vw,3.2rem);max-width:560px}
.catering-inquiry-copy>p{max-width:520px;margin-top:1.2rem;color:var(--muted-foreground);line-height:1.8}
.catering-inquiry-points{display:grid;gap:.8rem;margin-top:2rem}
.catering-inquiry-points div{display:flex;align-items:center;gap:.85rem;color:var(--muted-foreground);font-size:.85rem}
.catering-inquiry-points strong{font-weight:600;letter-spacing:.14em}
.catering-send-button:hover{transform:translateY(-2px);background:#19a850;box-shadow:0 12px 28px rgba(32,184,90,.28)}
.catering-form-note{margin:.8rem 0 0;color:var(--muted-foreground);font-size:.68rem;line-height:1.6;text-align:center}

/* Full-size photo viewer. */
.catering-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease}
.catering-lightbox.is-open{visibility:visible;opacity:1}
.catering-lightbox-backdrop{position:absolute;inset:0;background:rgba(8,6,4,.88);backdrop-filter:blur(12px)}
.catering-lightbox-panel{position:relative;z-index:1;max-width:min(1100px,94vw);max-height:90vh}
.catering-lightbox-image{display:block;max-width:100%;max-height:90vh;width:auto;height:auto;border:1px solid rgba(255,255,255,.22);border-radius:8px;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.catering-lightbox-close{position:absolute;z-index:2;right:-.75rem;top:-.75rem;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(20,14,10,.9);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
body.catering-lightbox-open{overflow:hidden}

@media (max-width:900px){
  .catering-glimpses-grid{column-gap:1.4rem;row-gap:2.4rem}
  .catering-glimpse-card:nth-child(2n){margin-top:2.2rem}
  .catering-inquiry{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:640px){
  .catering-glimpses-section{padding:5rem 1rem}
  .catering-glimpses-heading{margin-bottom:2.8rem}
  .catering-glimpses-grid{grid-template-columns:1fr;gap:1.8rem}
  .catering-glimpse-card:nth-child(2n){margin-top:0}
  .catering-glimpse-card.reveal-from-left{transform:translate3d(-45px,25px,0)}
  .catering-glimpse-card.reveal-from-right{transform:translate3d(45px,25px,0)}
  .catering-glimpse-image{aspect-ratio:4/3}
  .catering-inquiry{margin-top:3.5rem;padding:1.4rem;border-radius:2px 20px 2px 20px}
  .catering-inquiry-form{padding:1rem}
}
@media (prefers-reduced-motion:reduce){
  .catering-glimpse-card{opacity:1!important;transform:none!important;transition:none}
  .catering-glimpse-image{transition:none}
}


/* Catering Glimpses is a separate view from the Catering page. */
.catering-glimpses-standalone{
  padding-top:clamp(7rem,12vw,10rem);
}

/* Make the Catering Glimpses anchor land cleanly below the fixed header. */
#catering-glimpses{
  scroll-margin-top: 84px;
}