/* ==========================================================================
   Group hotels page (templates/pages/group.html).
   This hotel as a feature card, a small decorative route map (aria-hidden) and the other branches as cards.
   Motion: only opacity / translate / scale / transform (Motion rule).
   ========================================================================== */

/* ---------------------------------------------------------------- this hotel (Madinah) */
.group-home { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 900px) { .group-home { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.group-home__media { position: relative; }
.group-home__frame { box-shadow: var(--shadow-2); }
.group-home__badge { position: absolute; z-index: 3; top: 1rem; inset-inline-start: 1rem; padding: .42rem .95rem; font-size: var(--fs-small); box-shadow: var(--shadow-1); }
.group-home__badge .icon { width: 1em; height: 1em; }
.group-home__body { display: grid; justify-items: start; gap: var(--space-s); }
.group-home__title { font-size: var(--fs-h2); }
.group-home__district { font-size: var(--fs-body); }
.group-home__text { max-width: 34rem; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.8; }
.group-home__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-2xs); }

/* ---------------------------------------------------------------- map + other branches */
.group-net { display: grid; gap: clamp(1.25rem, .9rem + 1.6vw, 2.25rem); }
@media (min-width: 960px) { .group-net { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; } }

/* the map: geography never mirrors, so the box is laid out physically (direction: ltr) */
.group-map {
  position: relative; display: grid; align-items: center; overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem) clamp(1.25rem, .8rem + 2.4vw, 3rem) clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  border-radius: var(--r-xl); color: var(--on-dark); direction: ltr;
  background: radial-gradient(110% 90% at 22% 85%, rgba(194, 161, 95, .16), transparent 55%), radial-gradient(120% 100% at 80% 0%, var(--navy-700), var(--navy-900) 58%, var(--navy-950));
  --pattern-opacity: .07; --pattern-size: 48px;
}
.group-map::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(194, 161, 95, .2); border-radius: calc(var(--r-xl) - 8px); pointer-events: none; }
.group-map__box { position: relative; aspect-ratio: 3 / 2; }
.group-map__mark { position: absolute; top: clamp(1rem, .7rem + 1vw, 1.6rem); right: clamp(1rem, .7rem + 1vw, 1.6rem); opacity: .9; }
.group-map__mark-img { width: 48px; height: auto; }

/* route lines: a dashed gold hairline rotated from this hotel's city */
.group-map__line {
  position: absolute; height: 1px; margin-top: -.5px; transform-origin: 0 50%; transform: rotate(var(--a));
  background: repeating-linear-gradient(90deg, var(--gold-400) 0 7px, transparent 7px 12px); opacity: .8;
}
/* city points */
.group-map__pt { position: absolute; width: 0; height: 0; }
.group-map__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 5px rgba(211, 183, 124, .16); }
.group-map__pt.is-current .group-map__dot { left: -9px; top: -9px; width: 18px; height: 18px; background: var(--gold-300); box-shadow: 0 0 0 6px rgba(228, 207, 159, .2); }
.group-map__pt.is-current .group-map__dot::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid var(--gold-400); opacity: 0; }
.group-map__dot2 { position: absolute; left: -15px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); }
.group-map__label { position: absolute; display: grid; gap: .1rem; line-height: 1.3; white-space: nowrap; unicode-bidi: isolate; }
.group-map__pt--r .group-map__label { left: 18px; top: -.8em; text-align: left; }
.group-map__pt--bl .group-map__label { left: -9px; top: 20px; text-align: left; }
.group-map__pt--br .group-map__label { right: -9px; top: 18px; text-align: right; }
@media (max-width: 599px) { .group-map__label { white-space: normal; width: max-content; max-width: 8.5rem; } }
.group-map__city { font-family: var(--font-display); font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); font-weight: 700; color: #fff; }
:lang(en) .group-map__city { font-weight: 600; }
.group-map__w { white-space: nowrap; }
.group-map__status { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-400); }

/* other branches */
.group-list { display: grid; gap: .9rem; align-content: center; }
.group-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 1rem;
  padding: clamp(1.1rem, .9rem + .6vw, 1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.group-card__icon { width: 50px; height: 50px; }
.group-card__body { display: grid; gap: .1rem; min-width: 0; }
.group-card__city { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-ink); line-height: 1.5; }
.group-card__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.12rem + .5vw, 1.55rem); line-height: 1.4; }
.group-card__district { margin-top: .25rem; font-size: var(--fs-small); }
.group-card__text { margin-top: .35rem; color: var(--muted); font-size: var(--fs-small); }
.group-card__status { align-self: center; white-space: nowrap; }
@media (max-width: 479px) {
  .group-card { grid-template-columns: auto minmax(0, 1fr); }
  .group-card__status { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------- GM quote */
.group-quote { --pattern-opacity: .06; }
.group-quote__fig { justify-items: center; text-align: center; margin: 0; }
.group-quote__text { color: #fff; max-width: 34ch; }
.group-quote__by { display: inline-flex; align-items: center; gap: .9rem; text-align: start; }
.group-quote__face { flex: none; width: 62px; height: 62px; padding: 2px; border-radius: 50%; background: var(--gold-gradient); }
.group-quote__face picture, .group-quote__face img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.group-quote__face img { object-fit: cover; }
.group-quote__by .quote__by span { color: var(--on-dark-soft); }

/* ---------------------------------------------------------------- contact strip */
.group-contact__inner { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 900px) { .group-contact__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.group-contact__text { display: grid; gap: .5rem; }
.group-contact__title { font-size: var(--fs-h3); }
.group-contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------------------------------------------------------------- motion (full mode; calm mode = the base fades) */
html.js[data-motion="full"] .group-map__line { transition: opacity .5s var(--ease-out) var(--reveal-delay, 0ms), transform 1.7s var(--ease-expo) var(--reveal-delay, 0ms); }
html.js[data-motion="full"] .group-map__line:not(.is-in) { transform: rotate(var(--a)) scaleX(0); }
html.js[data-motion="full"] .group-map__line.is-in { opacity: .8; }
html.js[data-motion="full"] .group-map__dot { transition: scale 1s var(--ease-spring) var(--reveal-delay, 0ms); }
html.js[data-motion="full"] .group-map__pt:not(.is-in) .group-map__dot { scale: 0; }
html.js[data-motion="full"] .group-map__label { transition: translate 1.2s var(--ease-expo) calc(var(--reveal-delay, 0ms) + 120ms); }
html.js[data-motion="full"] .group-map__pt:not(.is-in) .group-map__label { translate: 0 8px; }
/* "you are here": a slow ring that widens and fades (compositor-only; off in calm mode) */
html[data-motion="full"] .group-map.is-in .group-map__pt.is-current .group-map__dot::after { animation: group-ring 3.2s var(--ease-out) 1.8s infinite; }
@keyframes group-ring { 0% { opacity: .85; transform: scale(.45); } 80%, 100% { opacity: 0; transform: scale(1.9); } }

/* a WhatsApp question about each other hotel (their details aren't confirmed yet) */
.group-card__ask { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; align-self: center; padding-block: .6rem; margin-block: -.6rem; color: var(--whatsapp-ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.group-card__ask .icon { width: 1.1em; height: 1.1em; }
.group-card__ask:hover { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 479px) { .group-card__ask { grid-column: 2; justify-self: start; } }