/* ==========================================================================
   Abyat Al Sharq — «كافيه لاف» café page (templates/pages/cafe.html) Every class is prefixed cafe-. Built on base.css + components.css tokens.
   Its own mood inside the hotel brand: espresso and walnut (the café's timber), crema, gold; the lattice of its
   wooden ceiling as a pattern. Motion rule: only transform / opacity animate (steam, marquee, wordmark drift),
   full motion only, paused off-screen by public/js/page-cafe.js; calm mode is a still composition.
   ========================================================================== */
.page-cafe {
  --cafe-950: #120c07;   /* espresso */
  --cafe-900: #1c130c;
  --cafe-850: #24180f;
  --cafe-crema: #f6efe4;
  --cafe-crema-2: #ede1cf;
}

/* ---------------------------------------------------------------- hero */
.cafe-hero { align-items: center; min-height: max(620px, 100svh); background: var(--cafe-950); --curtain: var(--cafe-950); view-timeline: --cafe-hero block; }
.cafe-hero::after { display: none; }
.cafe-hero__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34% 44% at 26% 0%, rgba(222, 166, 94, .26), transparent 72%),   /* warm pendant light over the photo side */
    radial-gradient(28% 36% at 78% 4%, rgba(222, 166, 94, .12), transparent 72%),
    radial-gradient(70% 55% at 50% 105%, rgba(122, 81, 52, .42), transparent 72%),
    linear-gradient(180deg, var(--cafe-900) 0%, var(--cafe-950) 100%);
}
[dir="ltr"] .cafe-hero__bg { transform: scaleX(-1); }
.cafe-hero__bg::before { /* the café's wooden lattice ceiling, fading down the wall */
  content: ""; position: absolute; inset: 0 0 40% 0;
  background-image: linear-gradient(rgba(211, 183, 124, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(211, 183, 124, .1) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
}
.cafe-hero__wordmark {
  position: absolute; z-index: -1; inset-inline: 0; bottom: -.06em; margin: 0;
  display: flex; justify-content: center; pointer-events: none; user-select: none;
  font-family: var(--font-latin); font-weight: 600; font-size: clamp(4.6rem, 17vw, 19rem); line-height: .82; letter-spacing: .05em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(211, 183, 124, .24);
}
@supports (animation-timeline: view()) {
  html[data-motion="full"] .cafe-hero__wordmark { animation: cafe-wordmark linear both; animation-timeline: --cafe-hero; animation-range: exit 0% exit 100%; }
}
@keyframes cafe-wordmark { to { transform: translate3d(0, -38%, 0); opacity: .25; } }

.cafe-hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); align-items: center; }
.cafe-hero__text { display: grid; gap: var(--space-s); justify-items: start; }
.cafe-hero__title { font-size: clamp(3rem, 1.6rem + 4.8vw, 6rem); }
.cafe-hero__latin { margin-top: -.5rem; letter-spacing: .48em; color: var(--gold-300); }
:lang(ar) .cafe-hero__title { line-height: 1.42; padding-bottom: .06em; }
:lang(ar) .cafe-hero__latin { margin-top: .1rem; }
.cafe-hero__sub { max-width: 30rem; }

/* steam emblem: a line cup, three wisps rising (transform + opacity) */
.cafe-emblem { position: relative; display: grid; place-items: center; width: 66px; height: 66px; margin-block: .2rem; border-radius: 50%; border: 1px solid rgba(194, 161, 95, .5); color: var(--gold-400); }
.cafe-emblem__cup { width: 34px; height: 34px; margin-top: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cafe-steam { position: absolute; top: 8px; left: 50%; display: flex; gap: 3px; translate: -52% 0; }
.cafe-steam i {
  display: block; width: 6px; height: 15px; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 16'%3E%3Cpath d='M3 15c-2.2-2.4 2.2-4.6 0-7s2.2-4.6 0-7' fill='none' stroke='%23d3b77c' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-motion="full"] .cafe-steam i { animation: cafe-steam 3.4s ease-in-out infinite both; }
html[data-motion="full"] .cafe-steam i:nth-child(2) { animation-delay: -1.15s; }
html[data-motion="full"] .cafe-steam i:nth-child(3) { animation-delay: -2.3s; }
@keyframes cafe-steam {
  0% { opacity: 0; transform: translate3d(0, 6px, 0) scaleY(.75); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(0, -8px, 0) scaleY(1.12); }
}
html[data-motion] .cafe-steam.is-paused i { animation-play-state: paused; } /* must outrank the animation shorthand above */

.cafe-hero__media { position: relative; justify-self: center; width: min(100%, 76vw, 430px); padding-block-end: 10%; }
.cafe-hero__main .frame-outline { --outline-radius: var(--r-xl); }
.cafe-hero__main .frame-outline::before { border-color: rgba(211, 183, 124, .6); }
.cafe-hero__main .frame { border-radius: var(--r-xl); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .7); }
.cafe-hero__round {
  position: absolute; z-index: 2; bottom: 0; inset-inline-start: -9%; width: 42%;
  padding: 6px; border-radius: 50%; background: var(--cafe-950); box-shadow: 0 0 0 1px rgba(194, 161, 95, .55);
}
@media (min-width: 900px) {
  .cafe-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .cafe-hero__media { width: min(100%, calc(min(62svh, 580px) * .8)); padding-block-end: 8%; }
  .cafe-hero__round { inset-inline-start: -24%; width: 44%; }
}

/* ---------------------------------------------------------------- intro: steps up from the lobby + visit facts */
.cafe-intro { background: linear-gradient(180deg, var(--ivory) 0%, var(--cafe-crema) 100%); }
.cafe-intro__media { width: min(100%, 470px); margin-inline: auto; }
.cafe-intro__text .lead { color: var(--ink-soft); }
.cafe-intro__para { color: var(--muted); }
.cafe-info { margin: 0; border-top: 1px solid var(--line); }
.cafe-info__row { display: grid; grid-template-columns: minmax(9.5rem, auto) minmax(0, 1fr); gap: .35rem 1.5rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.cafe-info__label { display: flex; align-items: center; gap: .8rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.cafe-info__label .icon-badge { color: var(--gold-700); border-color: var(--gold-500); }
.cafe-info__value { margin: 0; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 559px) {
  .cafe-info__row { grid-template-columns: minmax(0, 1fr); }
  .cafe-info__value { padding-inline-start: calc(42px + .8rem); }
}

/* ---------------------------------------------------------------- what you'll find (espresso) */
.cafe-serves { background: var(--cafe-900); overflow: clip; --curtain: var(--cafe-850); }
.cafe-serves__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 50% 0%, rgba(222, 166, 94, .14), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(122, 81, 52, .3), transparent 70%); }
.cafe-serves .container { position: relative; }
.cafe-serves__grid { display: grid; gap: clamp(2.5rem, 1.6rem + 3vw, 3.5rem) clamp(1.25rem, .8rem + 1.8vw, 2.25rem); max-width: 1160px; margin-inline: auto; }
.cafe-serve { display: grid; gap: 1.3rem; align-content: start; }
.cafe-serve .frame { --ratio: 4 / 3; }
.cafe-serve__body { display: grid; gap: .55rem; justify-items: start; }
.cafe-serve__icon { width: 48px; height: 48px; color: var(--gold-400); border-color: rgba(194, 161, 95, .5); }
.cafe-serve__icon .icon { width: 22px; height: 22px; }
.cafe-serve__title { font-size: var(--fs-h3); color: var(--white); }
.cafe-serve__text { color: var(--on-dark-soft); font-size: var(--fs-small); line-height: 1.8; max-width: 36ch; }
@media (min-width: 760px) {
  .cafe-serves__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .cafe-serve .frame { --ratio: 3 / 4; }
  .cafe-serve:nth-child(2) { margin-top: clamp(2rem, .5rem + 4vw, 4.75rem); } /* editorial stagger (layout, not motion) */
}

/* ---------------------------------------------------------------- name marquee (transform only, pauses off-screen) */
/* the band itself is laid out left-to-right in both languages: in an RTL band the max-content track hung off the left
   edge, so the Arabic strip was empty for the first quarter of every loop. Arabic still drifts with the reading
   direction (animation-direction: reverse below); the Arabic names keep their own direction (dir="auto", isolate). */
.cafe-marquee { position: relative; overflow: clip; direction: ltr; background: var(--cafe-950); color: var(--gold-400); padding-block: clamp(1.05rem, .8rem + 1vw, 1.6rem); border-block: 1px solid rgba(194, 161, 95, .18); }
.cafe-marquee__track { display: flex; width: max-content; direction: ltr; }
.cafe-marquee__group { display: flex; flex: none; align-items: center; gap: clamp(1.4rem, 1rem + 1.8vw, 2.75rem); padding-inline-end: clamp(1.4rem, 1rem + 1.8vw, 2.75rem); white-space: nowrap; line-height: 1.3; }
.cafe-marquee__name, .cafe-marquee__hotel { font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem); font-weight: 700; unicode-bidi: isolate; }
.cafe-marquee__hotel { color: var(--on-dark-soft); font-weight: 400; }
:lang(en) .cafe-marquee__name, :lang(en) .cafe-marquee__hotel { font-weight: 500; font-style: italic; }
.cafe-marquee__latin { font-family: var(--font-latin); font-size: clamp(1rem, .85rem + .6vw, 1.4rem); font-weight: 600; letter-spacing: .34em; color: var(--gold-300); }
.cafe-marquee__group > i { display: block; flex: none; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); opacity: .65; }
html[data-motion="full"] .cafe-marquee__track { animation: cafe-marquee 60s linear infinite; }
html[dir="rtl"][data-motion="full"] .cafe-marquee__track { animation-direction: reverse; } /* Arabic: drifts with the reading direction */
html[data-motion] .cafe-marquee.is-paused .cafe-marquee__track { animation-play-state: paused; }
@keyframes cafe-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------------------------------------------------------------- identity: the two cups */
.cafe-identity { background: var(--cafe-crema); }
.cafe-identity__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.25rem, .5rem + 3vw, 3.5rem); align-items: center; justify-items: center; }
.cafe-identity__text { grid-column: 1 / -1; order: -1; display: grid; justify-items: center; text-align: center; max-width: 40rem; }
.cafe-identity__text .section-head { margin-bottom: var(--space-m); }
.cafe-identity__mark {
  margin: 0 0 var(--space-s); font-family: var(--font-latin); font-weight: 600; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); line-height: 1; letter-spacing: .14em;
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .1em .2em; /* keep glyph overhangs inside the painted box (background-clip:text) */
}
.cafe-identity__lead { color: var(--ink-soft); }
.cafe-identity__cup { display: grid; justify-items: center; gap: 1.1rem; width: min(100%, 270px); margin: 0; text-align: center; }
.cafe-identity__cup .frame { width: 100%; outline: 1px solid rgba(160, 122, 53, .45); outline-offset: 7px; }
.cafe-identity__cup figcaption { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); max-width: 22ch; }
@media (min-width: 900px) {
  .cafe-identity__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
  .cafe-identity__text { grid-column: auto; order: 0; }
  .cafe-identity__cup--cold { margin-top: 5rem; }
  .cafe-identity__cup--coffee { margin-bottom: 5rem; }
}

/* ---------------------------------------------------------------- closing band: espresso over the counter */
.cafe-cta::after { background: linear-gradient(rgba(28, 19, 12, .8), rgba(18, 12, 7, .9)); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 699px) {
  .cafe-hero .page-hero__actions { width: 100%; }
  .cafe-hero .page-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* phones/tablets: the photo leads the first screen */
@media (max-width: 899px) {
  .cafe-hero { min-height: 0; }
  .cafe-hero__inner { gap: clamp(2rem, 1.4rem + 3vw, 3rem); }
  .cafe-hero__media { order: -1; width: min(100%, 62vw, 360px); }
}

/* ---------------------------------------------------------------- one photo per place on this page
   what you'll find: the counter photo beside a list (no repeated cup / drink shots); identity: the cold-drink cup */
.cafe-serves__layout { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: center; max-width: 1160px; margin-inline: auto; }
.cafe-serves__frame { width: min(100%, 470px); justify-self: center; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7); }
.cafe-serves__list { display: grid; gap: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.cafe-serves__list .cafe-serve { display: flex; align-items: flex-start; gap: 1.1rem; margin-top: 0; }
.cafe-serves__list .cafe-serve__body { gap: .4rem; }
.cafe-serves__list .cafe-serve__text { max-width: 44ch; }
@media (min-width: 900px) { .cafe-serves__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.cafe-identity__grid { grid-template-columns: minmax(0, 1fr); }
.cafe-identity__photo { display: grid; justify-items: center; gap: 1.6rem; width: min(100%, 420px); margin: 0 auto; text-align: center; }
/* the arch has no width of its own (aspect-ratio box + absolutely placed photo): as a centred grid item it shrank to
   0×0 and only the caption showed — it takes the figure's full width */
.cafe-identity__photo > .frame-outline, .cafe-identity__photo > .frame { width: 100%; justify-self: stretch; }
.cafe-identity__photo figcaption { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); max-width: 30ch; }
@media (min-width: 900px) {
  .cafe-identity__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .cafe-identity__text { order: 0; }
}