/* ==========================================================================
   Abyat Al Sharq — «جناح العرسان» Newlyweds Suite page (templates/pages/honeymoon.html) Every class is prefixed hm-. Built on base.css + components.css tokens.
   Motion rule: only transform / translate / rotate / scale / opacity animate; petals drift on the compositor in
   full motion only (calm mode = a still composition) and pause off-screen (public/js/page-honeymoon.js).
   ========================================================================== */
.page-honeymoon {
  --hm-rose-700: #8f2f43;
  --hm-rose-500: #c25467;
  --hm-rose-300: #e3a2ac;
  --hm-blush: #fbf3f0;      /* ivory with a breath of rose */
  --hm-blush-2: #f5e7e3;
}
.hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- hero: text + arch photo + round detail */
.hm-hero { align-items: center; min-height: max(620px, 100svh); background: var(--navy-950); --curtain: var(--navy-950); }
.hm-hero::after { display: none; } /* the shared photo scrim isn't needed: no photo sits under the text */
.hm-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 62% at 24% 58%, rgba(194, 84, 103, .2), transparent 72%),
    radial-gradient(42% 52% at 70% 14%, rgba(194, 161, 95, .13), transparent 70%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
}
[dir="ltr"] .hm-hero__glow { transform: scaleX(-1); } /* the rose glow stays behind the photo side */
.hm-hero__glow::after { /* faint mashrabiya lattice, fading towards the text */
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c2a15f' stroke-width='1'%3E%3Cpath d='M19 19h18v18H19zM28 15.3 40.7 28 28 40.7 15.3 28z'/%3E%3Cpath d='M28 0v15.3M56 28H40.7M28 56V40.7M0 28h15.3M0 0l19 19M56 0 37 19M56 56 37 37M0 56l19-19'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px; opacity: .06;
  -webkit-mask-image: radial-gradient(60% 70% at 24% 55%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 24% 55%, #000, transparent 75%);
}
.hm-hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); align-items: center; }
.hm-hero__text { display: grid; gap: var(--space-s); justify-items: start; }
.hm-hero__title { font-size: clamp(2.9rem, 1.55rem + 4.6vw, 5.8rem); max-width: 5.625em; } /* 12ch / 15ch of Cormorant, in em (see critical.css .page-hero__title) */
:lang(en) .hm-hero__title { font-size: clamp(2.7rem, 1.5rem + 4vw, 5.2rem); max-width: 7.03em; }
.hm-hero__tagline { margin-top: -.35rem; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.95rem); line-height: 1.45; color: var(--gold-300); }
:lang(en) .hm-hero__tagline { font-style: italic; font-weight: 500; }
.hm-hero .page-hero__sub { max-width: 36rem; }

.hm-hero__media { position: relative; justify-self: center; width: min(100%, 76vw, 440px); padding-block-end: 10%; }
.hm-hero__arch .frame { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65); }
.hm-hero__arch .frame-outline::before { border-color: rgba(211, 183, 124, .7); }
.hm-hero__round {
  position: absolute; z-index: 2; bottom: 0; inset-inline-start: -9%; width: 40%;
  padding: 6px; border-radius: 50%; background: var(--navy-950); box-shadow: 0 0 0 1px rgba(194, 161, 95, .55);
}
.hm-hero__round .frame { --curtain: var(--navy-950); }

@media (min-width: 900px) {
  .hm-hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .hm-hero__media { width: min(100%, calc(min(64svh, 600px) * .8)); padding-block-end: 8%; }
  .hm-hero__round { inset-inline-start: -22%; width: 42%; }
}
/* phones/tablets: the photo leads the first screen (the text follows) */
@media (max-width: 899px) {
  .hm-hero { min-height: 0; }
  .hm-hero__inner { gap: clamp(2rem, 1.4rem + 3vw, 3rem); }
  .hm-hero__media { order: -1; width: min(100%, 62vw, 360px); }
}
/* the tail of «ج» in the large Amiri title needs room before the tagline */
:lang(ar) .hm-hero__title { line-height: 1.42; padding-bottom: .06em; }
:lang(ar) .hm-hero__tagline { margin-top: .2rem; }

/* ---- petals: inline SVG (two symbols), each in its own <span> so the browser composites the drift ---- */
.hm-petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip; }
.hm-petal { position: absolute; display: block; width: var(--s, 24px); height: var(--s, 24px); rotate: var(--r, 0deg); opacity: var(--o, .9); color: var(--gold-400); }
.hm-petal svg { width: 100%; height: 100%; overflow: visible; }
/* positions — "end" = the photo side (left in Arabic, right in English) */
.hm-petal--1 { --s: 34px; --r: 24deg;  top: 17%; inset-inline-end: 7%; }
.hm-petal--2 { --s: 26px; --r: -32deg; top: 30%; inset-inline-end: 41%; --o: .75; }
.hm-petal--3 { --s: 18px; --r: 70deg;  top: 70%; inset-inline-end: 3.5%; }
.hm-petal--4 { --s: 30px; --r: 140deg; bottom: 9%; inset-inline-end: 36%; --o: .7; }
.hm-petal--5 { --s: 15px; --r: -60deg; top: 48%; inset-inline-end: 1.5%; --o: .8; }
.hm-petal--6 { --s: 20px; --r: 200deg; bottom: 6%; inset-inline-start: 6%; --o: .55; }
.hm-petal--7 { --s: 22px; --r: 12deg;  top: 12%; inset-inline-end: 30%; --o: .6; }
@media (max-width: 899px) {
  /* stacked layout: keep the petals around the photo (bottom of the hero), away from the text */
  .hm-petal--2, .hm-petal--6, .hm-petal--7 { display: none; }
  .hm-petal--1 { top: auto; bottom: 37%; inset-inline-end: 6%; --s: 28px; }
  .hm-petal--3 { top: auto; bottom: 22%; inset-inline-end: 4%; }
  .hm-petal--4 { bottom: 4%; inset-inline-end: 12%; --s: 24px; }
  .hm-petal--5 { top: auto; bottom: 12%; inset-inline-end: auto; inset-inline-start: 5%; }
}
/* full motion: fade in after the hero, then drift slowly (transform + opacity only, compositor-driven) */
html[data-motion="full"] .hm-petal { animation: hm-petal-in 1.6s var(--ease-out) var(--d, .9s) both, var(--drift, hm-drift-a) var(--t, 11s) ease-in-out var(--dd, -2s) infinite alternate; }
.hm-petal--1 { --d: .9s;  --drift: hm-drift-a; --t: 11s;  --dd: -3s; }
.hm-petal--2 { --d: 1.2s; --drift: hm-drift-b; --t: 13s;  --dd: -6s; }
.hm-petal--3 { --d: 1.1s; --drift: hm-drift-c; --t: 9.5s; --dd: -1s; }
.hm-petal--4 { --d: 1.4s; --drift: hm-drift-b; --t: 12s;  --dd: -8s; }
.hm-petal--5 { --d: 1.3s; --drift: hm-drift-a; --t: 10s;  --dd: -5s; }
.hm-petal--6 { --d: 1.6s; --drift: hm-drift-c; --t: 14s;  --dd: -4s; }
.hm-petal--7 { --d: 1s;   --drift: hm-drift-c; --t: 12.5s; --dd: -9s; }
html[data-motion] .hm-petals.is-paused .hm-petal { animation-play-state: paused; } /* outranks the animation shorthand */
@keyframes hm-petal-in { from { opacity: 0; } }
@keyframes hm-drift-a { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(9px, -16px, 0) rotate(16deg); } }
@keyframes hm-drift-b { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-12px, -9px, 0) rotate(-18deg); } }
@keyframes hm-drift-c { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(7px, 13px, 0) rotate(11deg); } }

/* ---------------------------------------------------------------- intro: bedroom + lounge collage */
.hm-intro { background: linear-gradient(180deg, var(--ivory) 0%, var(--hm-blush) 100%); }
.hm-collage { position: relative; padding-block-end: 17%; }
.hm-collage .hm-collage__main { width: 82%; --curtain: var(--stone-100); }
.hm-collage .hm-collage__second {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 56%;
  border-radius: var(--r-md); box-shadow: 0 0 0 7px var(--hm-blush), 0 18px 32px -20px rgba(11, 29, 61, .42); /* small blur: it moves on reveal */
}
.hm-intro__text .lead { color: var(--ink-soft); }
.hm-intro__para { color: var(--muted); }
@media (min-width: 900px) { .hm-intro__split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

/* ---------------------------------------------------------------- what the decoration includes (dark) */
.hm-includes { --curtain: var(--navy-900); }
.hm-includes__split { align-items: start; }
.hm-includes__media { max-width: 520px; width: 100%; margin-inline: auto; }
@media (min-width: 900px) {
  .hm-includes__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* sticky beside the list, never taller than the space under the header (4:5 → width = 0.8 × height) */
  .hm-includes__media { order: 2; position: sticky; top: calc(var(--header-h) + 2rem); width: min(100%, 520px, calc((100svh - var(--header-h) - 4rem) * .8)); }
}
.hm-includes .section-head { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.hm-includes__list { display: grid; gap: clamp(1.4rem, 1rem + 1.4vw, 2.1rem) clamp(1.5rem, 1rem + 2.2vw, 3.2rem); }
@media (min-width: 700px) { .hm-includes__list { grid-template-columns: 1fr 1fr; } }
.hm-include { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1.3rem; border-top: 1px solid var(--line-on-dark); }
.hm-include__icon { color: var(--gold-400); border-color: rgba(194, 161, 95, .55); }
.hm-include__title { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.5; color: var(--white); }
.hm-include__text { margin-top: .25rem; color: var(--on-dark-soft); font-size: var(--fs-small); line-height: 1.8; }
.hm-includes__note { margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.hm-includes__note .icon { color: var(--gold-400); }

/* ---------------------------------------------------------------- gallery mosaic (shape from photos.json aspect) */
.hm-gallery { background: var(--hm-blush); }
.hm-gallery__count { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.hm-gallery__count .icon { color: var(--gold-600); }
.hm-mosaic-wrap { container-type: inline-size; }
.hm-mosaic {
  --gap: clamp(.6rem, .35rem + 1vw, 1.25rem); --cols: 2;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--gap);
  grid-auto-rows: clamp(110px, 26vw, 300px);                                         /* fallback */
  grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * .75); /* a 4:3 cell */
}
.hm-mosaic .hm-mosaic__tile { height: 100%; --curtain: var(--hm-blush-2); }
.hm-mosaic__tile--tall { grid-row: span 2; }
/* two columns: a wide photo takes a whole row (it suits its shape, and the 7 curated photos then fill every cell) */
.hm-mosaic__tile--wide { grid-column: span 2; }
@media (min-width: 1024px) {
  .hm-mosaic { --cols: 3; }
  .hm-mosaic__tile--wide { grid-column: span 2; grid-row: span 2; }
}

/* ---------------------------------------------------------------- how to book */
.hm-book { background: var(--ivory); }
.hm-steps { position: relative; max-width: 1080px; margin-inline: auto; }
.hm-step::before { background: var(--ivory); z-index: 1; font-variant-numeric: lining-nums; } /* number discs cover the connecting line */
.hm-steps::before { /* the gold thread that links the three steps */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: linear-gradient(to var(--end-side), var(--gold-500), rgba(194, 161, 95, .25));
}
@media (max-width: 799px) {
  .hm-step { padding-top: 0; padding-inline-start: 4.3rem; min-height: 3.1rem; }
  .hm-steps::before { top: 1.55rem; bottom: 1.55rem; inset-inline-start: calc(1.55rem - .5px); width: 1px; transform-origin: top; background: linear-gradient(to bottom, var(--gold-500), rgba(194, 161, 95, .25)); }
  html.js[data-motion="full"] .hm-steps:not(.is-in)::before { scale: 1 0; }
}
@media (min-width: 800px) {
  .hm-steps::before { top: calc(1.55rem - .5px); height: 1px; inset-inline-start: 1.55rem; width: calc(2 * ((100% - 2 * var(--space-l)) / 3 + var(--space-l))); transform-origin: var(--origin-start); }
  html.js[data-motion="full"] .hm-steps:not(.is-in)::before { scale: 0 1; }
}
html.js[data-motion="full"] .hm-steps::before { transition: scale 1.6s var(--ease-expo) .25s; }
.hm-book__card { display: grid; justify-items: center; gap: var(--space-m); max-width: 760px; margin: clamp(2.5rem, 1.8rem + 2.5vw, 4rem) auto 0; text-align: center; }
.hm-book__note { text-align: start; }
.hm-book__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ---------------------------------------------------------------- closing band: a whisper of rose in the navy */
.hm-cta::after { background: linear-gradient(135deg, rgba(143, 47, 67, .3), rgba(143, 47, 67, 0) 55%), linear-gradient(rgba(7, 21, 46, .74), rgba(7, 21, 46, .87)); }

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