/*
 * Ecopausa Somió — mobile-only responsive layer.
 * All rules are confined to screens below 768px so the desktop design is unchanged.
 */
@media (max-width: 767px) {
  html {
    overflow-x: hidden;
    scroll-padding-top: 7.5rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3 {
    max-width: 100%;
    text-wrap: balance;
  }

  p,
  li {
    overflow-wrap: break-word;
  }

  .tracking-eyebrow {
    letter-spacing: .2em;
    line-height: 1.5;
  }

  /* Primary navigation: two deliberate rows instead of one crowded line. */
  body > header.absolute {
    padding-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(180deg, rgba(18, 23, 20, .72) 0%, rgba(18, 23, 20, .3) 70%, rgba(18, 23, 20, 0) 100%);
  }

  body > header.absolute .mix-blend-difference {
    color: #fff;
    mix-blend-mode: normal;
  }

  body > header > div.mx-auto.flex.max-w-7xl {
    display: block;
    padding: 1rem 1.25rem .9rem;
  }

  body > header > div.mx-auto.flex.max-w-7xl > a {
    display: inline-block;
    font-size: 1.35rem;
    line-height: 1;
  }

  body > header > div.mx-auto.flex.max-w-7xl > nav {
    display: grid;
    width: 100%;
    margin-top: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem .55rem;
    font-size: .67rem;
    line-height: 1.25;
    letter-spacing: .11em;
  }

  body > header > div.mx-auto.flex.max-w-7xl > nav > a {
    min-width: 0;
    padding: .34rem .2rem;
    text-align: center;
    white-space: nowrap;
  }

  /* Home hero: let content define the height so the booking card never overlaps or clips. */
  #booking-top {
    height: auto !important;
    min-height: 100svh !important;
    overflow: hidden;
  }

  #booking-top > .relative.z-10 {
    height: auto !important;
    min-height: 100svh;
    padding-top: calc(8.25rem + env(safe-area-inset-top, 0px));
    padding-right: 1.25rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    padding-left: 1.25rem;
  }

  #booking-top > .relative.z-10 > .grid {
    gap: 1.35rem;
  }

  #booking-top h1 {
    margin-top: .75rem;
    font-size: clamp(3.15rem, 14.5vw, 4.15rem);
    line-height: .9;
    letter-spacing: -.025em;
  }

  #booking-top h1 + p {
    margin-top: 1rem;
    max-width: 31rem;
    font-size: .98rem;
    line-height: 1.45;
  }

  #booking-top .ecopausa-booking-card {
    margin-top: 0;
  }

  /* Booking cards and the injected Lodgify form. */
  .ecopausa-booking-card {
    min-width: 0;
    max-width: 100%;
    padding: 1rem !important;
    overflow: visible;
  }

  .ecopausa-booking-card h3 {
    font-size: 1.28rem;
    line-height: 1.18;
  }

  .ecopausa-booking-card .mt-6 {
    margin-top: 1rem;
  }

  #lodgify-book-now-box,
  #lodgify-book-now-box > *,
  #lodgify-book-now-box form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #lodgify-book-now-box [class*="row" i],
  #lodgify-book-now-box [class*="fields" i],
  #lodgify-book-now-box [class*="inputs" i] {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  #lodgify-book-now-box input,
  #lodgify-book-now-box select,
  #lodgify-book-now-box textarea,
  #lodgify-book-now-box button,
  #lodgify-book-now-box [role="button"],
  #lodgify-book-now-box [role="combobox"],
  #lodgify-book-now-box [aria-haspopup="listbox"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  #lodgify-book-now-box button,
  #lodgify-book-now-box [role="button"] {
    min-height: 44px;
  }

  /* More compact vertical rhythm on phones. */
  .py-28 {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .pb-28 {
    padding-bottom: 4.5rem;
  }

  .gap-16 {
    gap: 2.5rem;
  }

  .gap-12 {
    gap: 2rem;
  }

  .mt-16 {
    margin-top: 3rem;
  }

  .pt-12 {
    padding-top: 2rem;
  }

  h1.text-5xl,
  h2.text-5xl {
    font-size: clamp(2.65rem, 11.5vw, 3.15rem);
    line-height: 1 !important;
  }

  h2.text-4xl {
    font-size: clamp(2.15rem, 9.5vw, 2.55rem);
    line-height: 1.08 !important;
  }

  h3.text-3xl {
    font-size: 1.75rem;
    line-height: 1.12;
  }

  /* Stay page: compact hero facts and a useful two-column gallery. */
  body > header.relative + section.relative {
    padding-top: 3rem !important;
    padding-bottom: 2.75rem !important;
  }

  body > header.relative + section.relative h1 {
    margin-top: 1.25rem;
  }

  body > header.relative + section.relative .mt-12.flex.flex-wrap {
    display: grid !important;
    margin-top: 2rem;
    padding-top: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1rem !important;
    align-items: start;
  }

  body > header.relative + section.relative .mt-12.flex.flex-wrap > .text-border {
    display: none;
  }

  body > header.relative + section.relative .mt-12.flex.flex-wrap > span:not(.text-border) {
    min-width: 0;
    line-height: 1.35;
  }

  body > header.relative + section.relative .mt-12.flex.flex-wrap > span:last-child {
    grid-column: 1 / -1;
  }

  #booking > .grid > div:first-child > .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  #booking > .grid > div:first-child > .grid.grid-cols-4 > img:first-child {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 10;
  }

  #booking > .grid > div:first-child > .grid.grid-cols-4 > img:not(:first-child) {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

  #booking ul li {
    gap: 1rem;
  }

  #booking ul li > span:first-child {
    min-width: 0;
    line-height: 1.35;
  }

  /* Gijón and Asturias landing-page hero spacing. */
  body > header.relative + main > section:first-child {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  body > header.relative + main > section:first-child h1 {
    margin-top: 1.25rem;
    font-size: clamp(2.65rem, 11.5vw, 3.15rem);
    line-height: 1.01;
  }

  body > header.relative + main > section:first-child .mt-8.flex.flex-wrap > a,
  section .mt-8.flex.flex-wrap > a.inline-flex {
    flex: 1 1 100%;
    min-height: 44px;
    padding: .75rem 1rem;
    line-height: 1.3;
    text-align: center;
  }

  /* Location list: keep travel time separate from long place names. */
  .bg-primary .space-y-4 > .flex {
    align-items: flex-start;
    gap: 1rem;
  }

  .bg-primary .space-y-4 > .flex > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 1.38rem;
    line-height: 1.08;
  }

  .bg-primary .space-y-4 > .flex > span:last-child {
    flex: 0 0 auto;
    padding-top: .18rem;
    letter-spacing: .16em;
    white-space: nowrap;
  }

  /* Legal pages. */
  .legal-nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    gap: .8rem;
  }

  .legal-nav__links {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem .65rem;
    font-size: .67rem;
    line-height: 1.25;
    letter-spacing: .11em;
  }

  .legal-nav__links a {
    min-width: 0;
    padding: .3rem .15rem;
    text-align: center;
    white-space: nowrap;
  }

  .legal-shell {
    padding: 3.5rem 1.25rem 4.5rem;
  }

  .legal-shell h1 {
    font-size: clamp(2.8rem, 14vw, 4rem);
    line-height: 1;
  }

  .legal-content {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .legal-content section {
    padding: 1.4rem 0;
  }

  .legal-content h2 {
    font-size: 1.72rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .legal-content p,
  .legal-content li {
    font-size: .98rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  /* Footer links in a predictable grid. */
  .site-footer__inner {
    padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    gap: 1.5rem;
  }

  .site-footer__legal {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1rem;
    align-items: start;
  }

  .site-footer__legal span {
    grid-column: 1 / -1;
    margin-top: .4rem;
  }

  .site-footer__legal a {
    min-width: 0;
    line-height: 1.35;
  }

  .site-footer__copy {
    line-height: 1.5;
    letter-spacing: .18em;
  }
}

/* Extra-tight iPhones such as 320–375 px wide. */
@media (max-width: 374px) {
  body > header > div.mx-auto.flex.max-w-7xl > nav,
  .legal-nav__links {
    font-size: .62rem;
    letter-spacing: .07em;
    column-gap: .3rem;
  }

  #booking-top h1 {
    font-size: clamp(2.85rem, 14vw, 3.35rem);
  }

  h1.text-5xl,
  h2.text-5xl,
  body > header.relative + main > section:first-child h1 {
    font-size: 2.45rem;
  }

  .ecopausa-booking-card {
    padding: .85rem !important;
  }
}

/* Short landscape phones: keep navigation compact without touching tablets/desktops. */
@media (max-width: 767px) and (orientation: landscape) {
  body > header > div.mx-auto.flex.max-w-7xl > nav,
  .legal-nav__links {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #booking-top > .relative.z-10 {
    padding-top: 6.75rem;
  }
}