/* ==========================================================================
   About page (app/views/pages/about.php)
   Proportions follow the live page at 1440px: 1300px container, overlapping
   photo collages, 6-up amenity grid, counter band and "What You Can Book" cards.
   ========================================================================== */

/* Pictures that must fill a fixed-ratio frame */
.about-welcome__media picture,
.about-collage picture,
.book-card__media picture { width: 100%; height: 100%; }

/* ----- Hero (full-screen via .page-hero--full; overlay as on the live page) ----- */
.about-hero .media-cover { --overlay: 0.4; }

/* ----- Welcome ----- */
.about-welcome { padding-block: clamp(72px, 7.5vw, 108px) clamp(72px, 7.6vw, 110px); }
.about-welcome__intro { max-width: 830px; margin-inline: auto; }
.about-welcome__intro .brand-shell { margin-bottom: 6px; }
.about-welcome__title { max-width: 760px; }
.about-welcome__text { max-width: 830px; }
.about-welcome__media { margin: clamp(48px, 5.2vw, 74px) 0 0; aspect-ratio: 1300 / 730; }

/* ----- Story rows: "Why We Started" / "What Comes Next" ----- */
.about-row {
  display: grid; grid-template-columns: 650fr 580fr; align-items: center;
  column-gap: clamp(40px, 5.4vw, 76px);
}
.about-row--next { grid-template-columns: 580fr 650fr; margin-top: clamp(56px, 4.4vw, 64px); }
.about-row__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about-row__text .h3 { margin-top: 4px; }
.about-row__text .link-more { margin-top: 4px; }

/* Two photos overlapping, positioned in % so the collage scales as one piece */
.about-collage { position: relative; width: 100%; }
.about-collage--why { aspect-ratio: 489 / 506; }
.about-collage--next { aspect-ratio: 488 / 515; }
.about-collage__img { position: absolute; margin: 0; }
.about-collage__img--front { z-index: 1; }
.about-collage--why .about-collage__img--back { left: 0; top: 14%; width: 49.7%; height: 72.2%; }
.about-collage--why .about-collage__img--front { right: 0; top: 0; width: 68.3%; height: 100%; }
.about-collage--next .about-collage__img--back { left: 0; top: 11.7%; width: 62.3%; height: 88.3%; }
.about-collage--next .about-collage__img--front { right: 0; top: 0; width: 57.6%; height: 81.7%; }

/* ----- Amenity icon grid ----- */
.about-amenities { padding-block: clamp(72px, 7.8vw, 112px) clamp(72px, 7.4vw, 106px); }
.amenity-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(34px, 3.2vw, 46px) 20px;
}
.amenity-grid__item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.amenity-grid__icon { width: 44px; height: 44px; color: var(--c-ink); stroke-width: 1; }
.amenity-grid__label { font-family: var(--ff-heading); font-size: 17px; line-height: 1.35; color: var(--c-ink); }

/* ----- Counter band ----- */
.about-stats {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(110px, 13.5vw, 196px); text-align: center; background: var(--c-dark);
}
.about-stats__inner { position: relative; z-index: 1; }
.about-stats__text { max-width: 860px; color: var(--c-white); }
.stats {
  list-style: none; margin: clamp(36px, 3.6vw, 50px) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 197px)); justify-content: center;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline: 10px; }
.stat__num {
  font-family: var(--ff-heading); font-size: clamp(54px, 5vw, 72px); line-height: 1; color: var(--c-white);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); }

/* ----- "What You Can Book" cards ----- */
.about-book { padding-block: clamp(80px, 8.7vw, 125px) clamp(80px, 8.5vw, 122px); }
.about-book__head { max-width: 680px; margin: 0 auto clamp(44px, 5.2vw, 75px); }
.book-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.book-card {
  --frame: 10px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 2 / 3; padding: 30px 30px 48px; background: var(--c-dark);
  color: var(--c-white); text-align: center;
}
.book-card__media { position: absolute; inset: 0; z-index: -2; }
.book-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.book-card::before { /* legibility gradient */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 38%, rgba(0, 0, 0, 0.08) 68%, rgba(0, 0, 0, 0) 100%);
}
.book-card::after { /* fine inner frame, as on the live site */
  content: ""; position: absolute; inset: var(--frame); z-index: 1; pointer-events: none;
  border: 1px solid #2ba1a9;
  transition: inset 0.6s var(--ease-out), border-color var(--t) var(--ease);
}
.book-card__body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.book-card__title { font-size: clamp(26px, 2.25vw, 32px); line-height: 1.2; color: var(--c-white); }
.book-card__link { color: inherit; }
.book-card__link::before { /* whole card is clickable */
  content: ""; position: absolute; inset: 0; z-index: 2;
}
.book-card__link:focus-visible { outline: none; }
.book-card:focus-within { outline: 2px solid var(--c-lagoon); outline-offset: 4px; }
.book-card__text {
  max-width: 260px; font-size: 12px; font-weight: 500; line-height: 1.55; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.92);
}
@media (hover: hover) {
  .book-card:hover .book-card__media img { transform: scale(1.05); }
  .book-card:hover { --frame: 14px; }
  .book-card:hover::after { border-color: var(--c-turquoise); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .amenity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .book-card { aspect-ratio: 4 / 5; }
}
@media (max-width: 900px) {
  .about-row, .about-row--next { grid-template-columns: 1fr; row-gap: 44px; }
  .about-row--next { margin-top: 80px; }
  .about-collage { max-width: 580px; margin-inline: auto; }
  .about-row__text { max-width: 640px; }
}
@media (max-width: 767px) {
  .about-welcome__media { aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; max-width: 420px; }
  .amenity-grid__icon { width: 40px; height: 40px; }
  .amenity-grid__label { font-size: 16px; }
}
@media (max-width: 600px) {
  .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .book-cards { grid-template-columns: 1fr; gap: 16px; }
  .book-card { aspect-ratio: 4 / 4.6; padding: 28px 24px 40px; }
  .about-row--next { margin-top: 64px; }
}