/* Maha Hills Landing - static golden reference.
   Only values given in the brief are treated as Figma-defined.
   Values marked PROVISIONAL are not from Figma; see docs/FIGMA-OPEN-QUESTIONS.md. */

:root {
  /* Fonts - Lyon Text Regular is NOT available locally; swap --font-editorial when supplied. */
  --font-editorial: "Lyon Text", Georgia, "Times New Roman", serif;   /* PROVISIONAL fallback */
  --font-body: Georgia, "Times New Roman", serif;                     /* PROVISIONAL */
  --font-label: Georgia, "Times New Roman", serif;                    /* PROVISIONAL */

  /* Colors */
  --color-bg: #fff;
  --color-ink: #313131;         /* known Figma text colour, provisional primary ink */
  --color-placeholder: #d9d9d9; /* neutral grey for every missing photograph */
  --color-hero-control: #fff;   /* Menu icon and Book Now: white over the hero photograph (per Figma reference) */
  --hero-scrim: rgba(0, 0, 0, 0.3);  /* CLIENT PREVIEW READABILITY TREATMENT - final confirmation pending. Faint top-only shade for the white Menu over bright sky. */
  --hero-scrim-height: 260px;

  /* Layout - from Figma geometry (1440 canvas) */
  --page-gutter: 65px;          /* hero: Menu left edge x=65; Book Now right edge 1440-1375=65 */
  --container: 1228px;          /* content span x 99-1327 in the about-us frame */
  --content-gutter: 40px;       /* minimum side space when the viewport is narrower than the container */

  /* Type - derived from measured Figma text boxes (PROVISIONAL, Lyon Text not available).
     Headings: 45px boxes whose widths (381 / 370 / 360 / 734) fit ~0.5em per glyph at 45px, i.e. 45px / 100%.
     Body: 22px leading (3 lines = 66, 4 lines = 88, 6 lines fits Deluxe). Sizes scale with the viewport
     below 1440 and are clamped. Replace --font-* and re-check wrapping when Lyon Text is supplied. */
  --fs-heading: clamp(1.75rem, 3.125vw, 2.8125rem);   /* 45px at 1440 */
  --lh-heading: 1;                                    /* 45px at 1440 */
  --fs-body: clamp(1rem, 1.528vw, 1.375rem);          /* 22px at 1440 */
  --lh-body: 1;                                       /* 22px at 1440; opened up at narrower widths */
  --fs-cta: var(--fs-body);
  --fs-hero-cta: 2.125rem;                            /* Book Now: 34px (was 38; understated editorial refinement, PROVISIONAL) */
  --ls-heading: 0.005em;                              /* slight opening to offset the narrower fallback face */
  --tw-body: pretty;                                  /* text-wrap: avoids single-word last lines, no manual breaks */

  /* Vertical rhythm - measured between Figma boxes at 1440; --s scales the large gaps down */
  --s: 1;
  --gap-intro-top: calc(102px * var(--s));        /* frame top -> "Maha Hills Resort" */
  --gap-to-package: calc(180px * var(--s));       /* intro copy -> "Our Packages" */
  --gap-to-room: calc(224px * var(--s));          /* package CTA -> Deluxe image */
  --gap-to-wellness: calc(112px * var(--s));      /* room image -> wellness image */
  --gap-to-experiences: calc(175px * var(--s));   /* wellness copy -> 3-column row */
  --gap-to-stories: calc(111px * var(--s));       /* experiences CTA -> stories row */
  --gap-media-title: 49px;                        /* image -> heading (measured 49) */
  --gap-text: 13px;                               /* heading -> copy -> CTA (measured 13) */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden; /* safety net only; layout must not rely on it */
}

a { color: inherit; }

/* ---------- Hero (main page-1, 1440 x 1024) ---------- */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1024;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-placeholder);   /* fallback while the photograph loads */
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                       /* never distorted; cropped to fill the 1440 x 1024 composition */
  object-position: 70% 50%;                /* cover is height-limited at 1440: only the sides crop; biases away from the sun glare behind Menu */
}

.hero-media::after {                       /* readability shade behind the controls; top band only, fades to nothing */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--hero-scrim-height);
  background: linear-gradient(to bottom, var(--hero-scrim), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.hero-bar {
  position: absolute;
  inset: 0 var(--page-gutter) auto;
  height: 184px;               /* logo: y 23 + h 161 */
}

.hero-menu,
.hero-cta {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-label);
  font-size: var(--fs-hero-cta);
  line-height: 1;
  color: var(--color-hero-control);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.hero-menu {                    /* x 65, y 50, 83 x 64 */
  --hm-w: 59px;                 /* line length (was 67, ~12% shorter), gap and weight from the hero reference crop */
  --hm-gap: 17px;
  --hm-weight: 2px;
  left: 0;
  top: 50px;
  width: 83px;
  height: 64px;
  justify-content: flex-start;
}

.hero-cta {                     /* x 1190, y 61, 185 x 47; plain text, no outline/fill (per hero reference crop) */
  right: 0;
  top: 61px;
  width: 185px;
  height: 47px;
}

.hero-menu-icon {               /* three-line hamburger; centre sits ~3px above the slot centre in the reference */
  position: relative;
  display: block;
  width: var(--hm-w);
  height: var(--hm-weight);
  margin-left: 4px;
  transform: translateY(-3px);
  background: currentColor;
}
.hero-menu-icon::before,
.hero-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--hm-weight);
  background: currentColor;
}
.hero-menu-icon::before { top: calc(-1 * var(--hm-gap)); }
.hero-menu-icon::after { top: var(--hm-gap); }

.hero-logo {                    /* x 639, y 23, 164 x 161 (centered on 720) */
  position: absolute;
  left: 50%;
  top: 23px;
  width: 164px;
  aspect-ratio: 164 / 161;
  transform: translateX(-50%);
}

.hero-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* source is 1161 x 1128; keeps its proportions inside the 164 x 161 slot */
}

/* ---------- Shared content primitives ---------- */

.container {
  width: min(var(--container), 100% - 2 * var(--content-gutter));
  margin-inline: auto;
}

.heading {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--fs-heading);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.label,
.body-copy {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.label { font-family: var(--font-label); }
.body-copy { font-family: var(--font-body); text-wrap: var(--tw-body); }

.cta {                              /* single editorial link style for every "View Details" (PROVISIONAL) */
  display: inline-block;
  margin-top: var(--gap-text);
  font-family: var(--font-label);
  font-size: var(--fs-cta);
  line-height: var(--lh-body);
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.cta:hover, .cta:focus-visible { text-decoration-thickness: 2px; }

/* Photographic slots: grey placeholders. Status: PENDING CLIENT ASSET.
   When photographs arrive, put an <img> (object-fit: cover) inside the same box. */
.media {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--color-placeholder);
}

.package-media    { aspect-ratio: 1146 / 614; max-width: 1146px; margin-inline: auto; }
.room-media       { aspect-ratio: 724 / 461; }
.wellness-media   { aspect-ratio: 1222 / 535; }
.experience-media { aspect-ratio: 379 / 498; }
.story-media      { aspect-ratio: 762 / 461; }
.stories-grid .feature:last-child .story-media { aspect-ratio: 414 / 461; }

.section { padding-top: 0; }

/* ---------- 1. Intro / About (centred) ---------- */

.intro { padding-top: var(--gap-intro-top); text-align: center; }
.intro-location { margin-top: 10px; }
.intro-copy { max-width: 1152px; margin: 31px auto 0; }

/* ---------- 2. Curated Stays / package feature (centred) ---------- */

.package { padding-top: var(--gap-to-package); text-align: center; }
.package-label { max-width: 382px; margin-inline: auto; }
.package .heading#package-title { max-width: 734px; margin: 33px auto var(--gap-media-title); }
.package-name { margin-top: var(--gap-media-title); }
.package-copy { max-width: 910px; margin: var(--gap-text) auto 0; }

/* ---------- 3. Accommodation feature (image left, text right) ---------- */

.room { padding-top: var(--gap-to-room); }
.room-grid {
  display: grid;
  grid-template-columns: 724fr 470fr;   /* 724 image + 34 gap + text column to x=1327 */
  column-gap: 34px;
  align-items: start;
}
.room-text { max-width: 360px; }
.room-text .body-copy { margin-top: var(--gap-text); }

/* ---------- 4. Wellness / Retreat (wide image, centred text below) ---------- */

.wellness { padding-top: var(--gap-to-wellness); text-align: center; }
.wellness .container { max-width: 1222px; }
.wellness .heading { margin-top: var(--gap-media-title); }
.wellness .body-copy { margin-top: var(--gap-text); }

/* ---------- 5. Experience / Spa / Dining (three editorial columns, no cards) ---------- */

.experiences { padding-top: var(--gap-to-experiences); }
.experiences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 379 / 378 / 379 at 1440 */
  column-gap: 45px;
}

/* Shared editorial column: image, label, title, copy, CTA */
.feature-label { margin-top: 24px; }            /* PROVISIONAL: label position not measured */
.feature .heading { margin-top: 27px; }         /* image bottom -> title = 73 (measured) */
.feature .body-copy { margin-top: var(--gap-text); }
.feature .cta { margin-top: 25px; }             /* copy -> View Details (measured ~25 in the 3-column row) */

/* Experience columns: equal-height flex columns so every View Details lines up regardless of copy length */
.experiences .feature { display: flex; flex-direction: column; }
.experiences .feature .cta { align-self: flex-start; margin-top: auto; padding-top: 25px; }

/* ---------- 6. Stories / Sustainability (762 / 414 asymmetric) ---------- */

.stories { padding-top: var(--gap-to-stories); padding-bottom: var(--gap-to-stories); }
.stories-grid {
  display: grid;
  grid-template-columns: 762fr 414fr;
  column-gap: 53px;
}

/* ---------- Responsive adaptation (no mobile frame; conservative scale-down) ---------- */

@media (max-width: 1200px) {
  :root { --lh-body: 1.3; }   /* 22px leading is only kept where the 22px size is (>= ~1180px) */
}

@media (max-width: 1024px) {
  :root { --s: 0.7; --content-gutter: 32px; --page-gutter: 32px; --fs-hero-cta: 1.625rem; }
  .hero-logo { width: 128px; }
  .hero-bar { height: 150px; }
  .hero-menu { top: 40px; --hm-w: 46px; --hm-gap: 13px; }
  .hero-cta { top: 48px; width: 160px; }
}

@media (max-width: 900px) {
  .experiences-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 64px; }
}

@media (max-width: 768px) {
  :root { --s: 0.45; --content-gutter: 20px; --page-gutter: 20px; --lh-body: 1.5; --lh-heading: 1.1; --fs-hero-cta: 1.125rem; }
  .hero { aspect-ratio: auto; min-height: 640px; height: 100svh; max-height: 900px; }
  .hero-logo { width: 96px; top: 16px; }
  .hero-bar { height: 130px; }
  .hero-menu { top: 28px; width: 64px; height: 48px; --hm-w: 36px; --hm-gap: 9px; --hm-weight: 1.5px; }
  .hero-cta { top: 32px; width: 120px; height: 40px; }

  /* accommodation: image, then text */
  .room-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .room-text { max-width: none; }

  /* stories: single column, order preserved */
  .stories-grid { grid-template-columns: 1fr; row-gap: 64px; }
  .stories-grid .feature:last-child .story-media { aspect-ratio: 762 / 461; }

  .feature .cta, .experiences .feature .cta { padding-top: 0; margin-top: 16px; }
  .feature-label { margin-top: 20px; }
  .feature .heading { margin-top: 16px; }
  .package .heading#package-title { margin-top: 20px; margin-bottom: 32px; }
  .package-name, .wellness .heading { margin-top: 32px; }
}

@media (max-width: 600px) {
  .experiences-grid { grid-template-columns: 1fr; row-gap: 56px; }
}