/* section rhythm: one uniform vertical gap site-wide */
section + section { margin-top: 0 !important; }
section:not([style*="height: 100vh"]):not([style*="min-height: 100vh"]):not([style*="padding: 0 0"]) {
  padding-block: clamp(54px, 7vh, 78px) !important;
}
section[style*="padding: 0 0"] { padding-bottom: clamp(54px, 7vh, 78px) !important; }

/* menu numerals (all screen sizes) */
[data-menu] { counter-reset: pndnav; }
[data-menu] a { display: flex !important; align-items: baseline; gap: 0.55em; counter-increment: pndnav; }
[data-menu] a::before {
  content: counter(pndnav, upper-roman);
  flex: none;
  min-width: 2.4em;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.36em;
  letter-spacing: 0.16em;
  color: #8a7f68;
}

/* ============ MOBILE ONLY (desktop above 760px untouched) ============ */
@media (max-width: 760px) {

  section:not([style*="height: 100vh"]):not([style*="min-height: 100vh"]):not([style*="padding: 0 0"]) {
    padding-block: 34px !important;
  }
  section[style*="padding: 0 0"] { padding-bottom: 34px !important; }

  /* --- top bar --- */
  header { padding: 8px 12px !important; gap: 8px !important; }
  header img { height: 36px !important; }
  header span[style*="0.16em"] { font-size: 13.5px !important; letter-spacing: 0.05em !important; }
  header a[href*="#enquire"] {
    padding: 10px 13px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }
  header button { width: 44px !important; height: 40px !important; }
  [data-menu] a { font-size: clamp(24px, 6.8vw, 30px) !important; }

  /* --- sections: no side padding; text gets its own --- */
  section:not([style*="height: 100vh"]) { padding-left: 0 !important; padding-right: 0 !important; }
  section:not([style*="height: 100vh"]) > :not([style*="grid-template-columns"]):not([style*="background-image"]):not([style*="aspect-ratio"]) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* --- grids collapse to one column --- */
  :not(header)[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  [style*="grid-row"] { grid-row: auto !important; }
  section[style*="min-height: 100vh"] { min-height: 0 !important; }

  /* text columns inside grids keep the side margin */
  [style*="grid-template-columns"] > div:not([style*="aspect-ratio"]):not([style*="background-image"]):not(:has(> img)) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* media blocks run edge to edge */
  [style*="grid-template-columns"] > div[style*="aspect-ratio"],
  [style*="grid-template-columns"] > div[style*="background-image"],
  [style*="grid-template-columns"] > div:has(> img),
  article > div[style*="aspect-ratio"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [style*="grid-template-columns"] > div > img { width: 100% !important; height: auto !important; }

  /* photos above the title and text: home, events, activities */
  [data-page="home"] [style*="grid-template-columns"] > div[style*="aspect-ratio"],
  [data-page="home"] [style*="grid-template-columns"] > div:has(> img),
  [data-page="events"] [style*="grid-template-columns"] > div[style*="aspect-ratio"] {
    order: -1 !important;
  }
  [data-page="home"] #space > div { padding-top: 30px !important; }
  [data-page="home"] [style*="grid-template-columns"] > div[style*="aspect-ratio"],
  [data-page="home"] [style*="grid-template-columns"] > div[style*="background-image"],
  [data-page="home"] [style*="grid-template-columns"] > div:has(> img) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* --- image cropping on phones --- */
  [style*="aspect-ratio: 4 / 5"] { aspect-ratio: 4 / 4.4 !important; }
  [style*="aspect-ratio: 3 / 4"] { aspect-ratio: 4 / 4.4 !important; }
  div[style*="72vh"] { height: 52vh !important; min-height: 320px !important; }
  div[style*="70vh"] { height: 46vh !important; min-height: 300px !important; }

  /* --- Activities page: number above the photo, photo edge to edge --- */
  [data-page="activities"] article { display: flex !important; flex-direction: column !important; }
  [data-page="activities"] article > span { order: -1 !important; margin: 0 0 12px !important; }
  [data-page="activities"] article > span,
  [data-page="activities"] article > h2,
  [data-page="activities"] article > p {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* --- Rhythm and Rest: Rest section keeps text first --- */
  [data-page="relax"] section[data-screen-label="Massage"] [style*="grid-template-columns"] > div[style*="aspect-ratio"] { order: 2 !important; }
  [data-page="relax"] section[data-screen-label="Massage"] [style*="grid-template-columns"] > div:not([style*="aspect-ratio"]) { order: 1 !important; }

  /* --- Rent the Dependance: photo directly under the title --- */
  [data-page="dependance"] section[data-screen-label="La Foresteria"] {
    display: flex !important;
    flex-direction: column !important;
  }
  [data-page="dependance"] section[data-screen-label="La Foresteria"] > div:first-child { display: contents !important; }
  [data-page="dependance"] section[data-screen-label="La Foresteria"] > div:first-child > * {
    order: 4;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  [data-page="dependance"] section[data-screen-label="La Foresteria"] > div:first-child > :nth-child(1) {
    order: 1;
    padding-top: clamp(84px, 13vh, 120px) !important;
  }
  [data-page="dependance"] section[data-screen-label="La Foresteria"] > div:first-child > :nth-child(2) { order: 2; }
  [data-page="dependance"] section[data-screen-label="La Foresteria"] > div:first-child > :last-child { padding-bottom: 40px !important; }
  [data-page="dependance"] section[data-screen-label="La Foresteria"] > div[style*="background-image"] {
    order: 3 !important;
    margin: 24px 0 6px !important;
    width: 100% !important;
    min-height: 62vh !important;
  }

  /* homepage: bedroom photo touches the sunset photo above it */
  [data-page="home"] #space { padding-top: 0 !important; margin-top: 0 !important; }
  [data-page="home"] #space > div:first-child { padding-top: 0 !important; margin-top: 0 !important; }
  [data-page="home"] #space > div:first-child > div:first-child { padding-top: 0 !important; margin-top: 0 !important; }

  /* 'How to reach us' title aligns with the cards below it */
  [style*="grid-template-columns"] > h3 { padding-left: 22px !important; padding-right: 22px !important; }

  /* extra breathing room before the dark contact block */
  section#enquire { margin-top: 34px !important; }

  /* menu anchor lands on the bedroom photo, not the sunset one */
  [data-page="home"] #space { scroll-margin-top: 52px !important; }

  /* homepage hero: portrait photo on phones */
  [data-hero-img] {
    background-image: url('uploads/IMG_1455.jpeg') !important;
    background-position: center 40% !important;
  }

  /* --- type --- */
  h1 { font-size: clamp(34px, 10.5vw, 46px) !important; line-height: 1.06 !important; }
  h2 { font-size: clamp(27px, 8.4vw, 38px) !important; line-height: 1.12 !important; }
  h3 { font-size: clamp(22px, 6.6vw, 30px) !important; }
  p { text-wrap: pretty; }

  section a[style*="text-transform: uppercase"][style*="padding"] {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

@media (max-width: 400px) {
  header span[style*="0.16em"] { font-size: 12px !important; letter-spacing: 0.03em !important; }
  header img { height: 32px !important; }
  header a[href*="#enquire"] { padding: 9px 10px !important; font-size: 9px !important; letter-spacing: 0.06em !important; }
}