/* =====================================================================
   #hospedaje — «Dormir, navegar, comer» (Lane D) · FINAL.md §8.5
   (a) hotel sheet · (b) cruise full-bleed band · (c) restaurant plates
   Mobile-first.
   ===================================================================== */

#hospedaje {
  position: relative;
  padding-block: var(--section-pad);
}
.hosp__head {
  margin-bottom: var(--sp-8);
}

/* =================== (a) Hotel =================== */
.hosp__hotel {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-9);
}
@media (min-width: 1024px) {
  .hosp__hotel {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
    align-items: center;
  }
}

.hotel__frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: var(--sp-4);
  justify-self: center;
}
.frame__side {
  position: absolute;
  display: block;
  background: var(--c-gold);
}
.frame__side--t { top: 0; left: 0; right: 0; height: 2px; transform-origin: 0 50%; }
.frame__side--r { top: 0; right: 0; bottom: 0; width: 2px; transform-origin: 50% 0; }
.frame__side--b { bottom: 0; left: 0; right: 0; height: 2px; transform-origin: 100% 50%; }
.frame__side--l { top: 0; left: 0; bottom: 0; width: 2px; transform-origin: 50% 100%; }

.hotel__photo.photo--archive {
  width: 100%;
  max-width: 480px;      /* §2: Fairmont may go to 480 px (archive cap is 240) */
  margin: 0;
}
.hotel__photo .photo__tone {
  transition: opacity 0.4s var(--ease-out);
}
.hotel__frame:hover .photo__tone,
.hotel__frame.is-clear .photo__tone,
.hotel__frame:hover .photo--archive::after,
.hotel__frame.is-clear .photo--archive::after {
  opacity: 0;
}
.hotel__photo .photo__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  font: 600 var(--fs-eyebrow) / 1.2 var(--ff-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--g-scrim);
  z-index: 4;               /* above the archive tone layers (Core uses 4 too) */
}

.hotel__copy { min-width: 0; }
.hotel__copy .kicker { margin: 0 0 var(--sp-3); }
.hotel__name {
  margin: 0 0 var(--sp-2);
  font: 700 var(--fs-h2) / var(--lh-heading) var(--ff-display);
  font-optical-sizing: auto;
  color: var(--c-navy);
  text-wrap: balance;
}
.hotel__stars {
  display: inline-flex;
  gap: 0.12em;
  margin-bottom: var(--sp-4);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--c-gold);
}
.hotel__stars i {
  display: inline-block;
  font-style: normal;
  transform-origin: 50% 50%;
}
.hotel__desc {
  margin: 0 0 var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-navy);
}
.hotel__nights-label { margin: 0 0 var(--sp-3); }
.hotel__nights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.nightchip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 60px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-gold-ink);
  border-radius: var(--r-sm);
  background: var(--c-cream-light);
  box-shadow: var(--sh-1);
  transform-origin: 50% 50%;
}
.nightchip b {
  font: 700 1.5rem / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-navy);
}
.nightchip span {
  margin-top: 0.3em;
  font: 600 var(--fs-eyebrow) / 1 var(--ff-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-ink);
}
.hotel__addr {
  margin: 0 0 var(--sp-4);
  font: 400 var(--fs-small) / 1.5 var(--ff-body);
  font-style: normal;
  color: var(--c-ink-soft);
}
.hotel__addr a {
  color: var(--c-terracotta-text);
  text-decoration: underline;
  text-decoration-color: var(--c-gold);
  text-underline-offset: 0.2em;
}
.hotel__addr a:hover,
.hotel__addr a:focus-visible { text-decoration-color: currentColor; }
.hotel__addr a:focus-visible { outline: 2px solid var(--c-terracotta-deep); outline-offset: 4px; }
.hotel__note {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-cream-dark);
  font: italic 400 var(--fs-small) / 1.5 var(--ff-body);
  color: var(--c-ink-soft);
}

/* =================== (b) Cruise band =================== */
.hosp__cruise {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  margin-block: var(--sp-9);
  overflow: hidden;
  color: var(--c-cream);
  isolation: isolate;
}
.cruise__photo.photo--bleed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  z-index: 0;
}
.cruise__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--g-scrim-l), var(--g-scrim);   /* left + bottom darkening so the copy always sits on a scrim */
}
.cruise__copy {
  position: relative;
  z-index: 3;
  max-width: 44rem;
  padding-block: var(--sp-9) calc(180px + var(--sp-7));
}
@media (min-width: 1024px) {
  .cruise__copy {
    margin-inline: 0;                      /* text hugs the left edge of the band */
    padding-inline: var(--gutter);
    padding-block: var(--sp-10) calc(300px + var(--sp-7));
  }
}
.cruise__copy .kicker {
  margin: 0 0 var(--sp-3);
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.cruise__title {
  margin: 0 0 var(--sp-5);
  font: 700 var(--fs-h1) / var(--lh-display) var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  color: var(--c-cream);
}
.cruise__copy .cruise__alt {
  margin: calc(-1 * var(--sp-4)) 0 var(--sp-5);   /* sits right under the title: the name printed on the periódico cards */
  color: var(--c-cream);
  opacity: .85;
}
.cruise__p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-cream);
}

/* route Luxor → Asuán */
.cruise__route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  max-width: 34rem;
}
.route__city {
  font: italic 400 var(--fs-h3) / 1 var(--ff-display);
  font-optical-sizing: auto;
  color: var(--c-gold-light);
  white-space: nowrap;
}
.route__track {
  position: relative;
  display: block;
  height: 64px;
}
.route__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.route__path {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1;
  opacity: 0.75;
}
.route__dots {
  fill: none;
  stroke: var(--c-gold-light);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 10;
  opacity: 0.9;
}
.route__nights {
  list-style: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}
.route__dot {
  position: absolute;
  left: var(--p, 50%);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  translate: -50% -6px;
  transform-origin: 50% 6px;
}
.route__dot i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-gold-light);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-night) 55%, transparent);
}
.route__dot b {
  font: 700 var(--fs-small) / 1 var(--ff-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  white-space: nowrap;
}

/* water band */
.cruise__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .cruise__water { height: 300px; }
}
.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200vw;
  height: 100%;
  display: block;
}
.wave--1 { color: var(--c-teal-ink); opacity: 0.9; }
.wave--2 { color: var(--c-teal); opacity: 0.7; height: 78%; }
.wave--3 { color: var(--c-teal-mist); opacity: 0.4; height: 52%; display: none; }
@media (min-width: 1024px) {
  .wave--3 { display: block; }
}
.cruise__glow {
  position: absolute;
  left: 58%;
  bottom: 0;
  width: 26vw;
  min-width: 200px;
  height: 100%;
  background: radial-gradient(
    ellipse 50% 110% at 50% 100%,
    color-mix(in srgb, var(--c-gold-light) 55%, transparent) 0%,
    color-mix(in srgb, var(--c-gold) 28%, transparent) 40%,
    color-mix(in srgb, var(--c-gold) 0%, transparent) 72%
  );
  opacity: 0.45;
  transform: scaleY(1.35);
  transform-origin: 50% 100%;
}
.cruise__boat {
  position: absolute;
  left: 0;
  bottom: 34%;
  width: 90px;
  height: auto;
  overflow: visible;
}
@media (min-width: 1024px) {
  .cruise__boat { width: 140px; bottom: 32%; }
}
.cruise__boat-inner { transform-box: fill-box; transform-origin: 50% 100%; }
.cruise__boat .boat__cat { color: var(--c-navy); }

/* =================== (c) Restaurants =================== */
.hosp__food { margin-top: var(--sp-9); }
.hosp__food > .kicker { margin: 0 0 var(--sp-3); }
.food__title {
  margin: 0 0 var(--sp-7);
  font: 700 var(--fs-h2) / var(--lh-heading) var(--ff-display);
  font-optical-sizing: auto;
  color: var(--c-navy);
}
.plates {
  list-style: none;
  display: grid;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .plate {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--sp-6);
    align-items: start;
    text-align: left;
  }
  .plate > .plate__disc { grid-row: 1 / span 6; }
}
@media (min-width: 1024px) {
  .plates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-7);
  }
}

.plate {
  text-align: center;
  transform-origin: 50% 40%;
}
.plate__disc {
  position: relative;
  width: 240px;
  margin: 0 auto var(--sp-4);
  transform-origin: 50% 60%;
}
.plate__disc::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  box-shadow: var(--sh-lift);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  z-index: -1;
}
.plate__photo.photo--round {
  width: 240px;
  max-width: 240px;
  margin: 0;
  transition: transform 0.4s var(--ease-out);
}
.plate__photo .photo__tone { transition: opacity 0.4s var(--ease-out); }
.plate:hover .plate__photo,
.plate:focus-within .plate__photo,
.plate.is-clear .plate__photo { transform: translateY(-6px); }
.plate:hover .plate__disc::after,
.plate:focus-within .plate__disc::after,
.plate.is-clear .plate__disc::after { opacity: 1; }
.plate:hover .photo__tone,
.plate:focus-within .photo__tone,
.plate.is-clear .photo__tone,
.plate:hover .photo--archive::after,
.plate:focus-within .photo--archive::after,
.plate.is-clear .photo--archive::after { opacity: 0; }

.plate__name {
  margin: 0 0 var(--sp-2);
  font: 500 var(--fs-h3) / 1.15 var(--ff-display);
  font-optical-sizing: auto;
  color: var(--c-navy);
  text-wrap: balance;
}
.plate__cuisine {
  margin: 0 0 var(--sp-2);
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.5;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .plate__cuisine { margin-inline: 0; }
}
.plate__loc {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.plate__meal {
  color: var(--c-gold-ink);
  margin: 0 0 var(--sp-4);
  font-variant-numeric: tabular-nums;
}
.plate__meal .ico { width: 1em; height: 1em; }
.plate__desc {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-navy);
  text-align: left;
  max-width: 44ch;
  margin-inline: auto;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .plate__desc { margin-inline: 0; max-width: var(--measure); }
}