/* Seabird Travels — mobile refinements.
   Desktop layout lives in the pages' inline styles; every rule here is
   inside a max-width media query, so wide screens are untouched.
   Selectors match the serialized inline style text (CSSOM form:
   "grid-template-columns: minmax(0px, 1fr);"). */

/* ── tablet: four- and three-up card grids drop to two ───────────────── */
@media (max-width: 1120px) {
  [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
}

/* ── ≤980px: single-column page, stacked hero, scrollable nav ────────── */
@media (max-width: 980px) {
  header > div {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* burger menu: nav collapses into a dropdown panel */
  [data-burger] { display: inline-flex !important; }
  header nav { display: none !important; }
  header nav[data-open="1"] {
    display: flex !important;
    order: 9 !important;
    flex: 1 0 100% !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    gap: 2px !important;
    background: #fff;
    border-radius: 26px;
    padding: 10px !important;
    box-shadow: 0 16px 36px rgba(18, 58, 107, .14);
    animation: revealUp .28s ease-out both;
  }
  header nav[data-open="1"] a {
    padding: 15px 20px !important;
    font-size: 17px !important;
    border-radius: 18px !important;
  }

  /* two-column blocks (hero, about, policy, request) stack */
  [style*="grid-template-columns: minmax(0px,"] { grid-template-columns: minmax(0px, 1fr) !important; }
  [style*="repeat(3, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }

  /* generous desktop gaps get tighter */
  [style*="gap: 56px"], [style*="gap: 54px"], [style*="gap: 52px"],
  [style*="gap: 50px"], [style*="gap: 48px"], [style*="gap: 46px"] { gap: 28px !important; }

  /* itinerary rows: number beside the text, image full width beneath */
  [style*="grid-template-columns: 78px minmax(0px, 220px) minmax(0px, 1fr)"] {
    grid-template-columns: 62px minmax(0px, 1fr) !important;
    align-items: start !important;
    padding: 16px 18px 20px 0 !important;
    row-gap: 16px !important;
  }
  [style*="grid-template-columns: 78px minmax(0px, 220px) minmax(0px, 1fr)"] > div:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 190px !important;
  }
  [style*="grid-template-columns: 78px minmax(0px, 220px) minmax(0px, 1fr)"] > div:nth-child(3) {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
  }
  [style*="left: 38px"] { display: none !important; }

  /* hero visuals: shorter, gentler corners */
  [style*="height: 560px"], [style*="height: 540px"], [style*="height: 520px"] { height: 340px !important; }
  [style*="border-radius: 220px 34px"],
  [style*="border-radius: 34px 220px"] { border-radius: 30px !important; }

  /* floating mascots and speech bubbles flow into the column */
  [style*="left: -34px"], [style*="right: -28px"] {
    position: relative !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    display: block !important;
    width: 132px !important; height: 132px !important;
    margin: -34px auto 0 !important;
  }
  [style*="right: -14px"][style*="position: absolute"],
  [style*="left: -16px"][style*="position: absolute"] {
    position: relative !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    max-width: none !important;
    margin-top: 16px !important;
  }
  [style*="left: -18px"][style*="position: absolute"] {
    position: relative !important;
    left: auto !important; bottom: auto !important;
    width: 116px !important; height: 116px !important;
    margin: -28px auto 0 !important;
  }

  /* booking sidebar stops sticking once it sits under the form */
  [style*="top: 110px"] { position: static !important; }

  /* page gutters and panel padding */
  [style*="max-width: 1360px"], [style*="max-width: 1300px"],
  [style*="max-width: 1240px"], [style*="max-width: 1180px"] { padding-inline: 18px !important; }
  [style*="border-radius: 64px;"] { border-radius: 34px !important; margin-inline: 12px !important; }
  [style*="border-radius: 64px 64px 0px 0px"] { border-radius: 34px 34px 0 0 !important; }
  [style*="border-radius: 48px"], [style*="border-radius: 44px"],
  [style*="border-radius: 40px"], [style*="border-radius: 36px"] { padding: 28px 22px !important; }
  footer > div { padding-inline: 22px !important; }
}

/* ── ≤680px: phones ─────────────────────────────────────────────────── */
@media (max-width: 680px) {
  [style*="repeat(2, minmax(0px, 1fr))"],
  [style*="repeat(3, minmax(0px, 1fr))"],
  [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: minmax(0px, 1fr) !important; }

  header img[alt*="Seabird"] { width: 80px !important; height: 58px !important; }
  header > div { gap: 10px !important; }
  header a[style*="height: 46px"] { height: 44px !important; padding-inline: 18px !important; font-size: 13px !important; }

  [style*="height: 560px"], [style*="height: 540px"], [style*="height: 520px"] { height: 250px !important; }
  [style*="grid-template-columns: 78px minmax(0px, 220px) minmax(0px, 1fr)"] {
    grid-template-columns: 52px minmax(0px, 1fr) !important;
  }
  [style*="grid-template-columns: 78px minmax(0px, 220px) minmax(0px, 1fr)"] > div:nth-child(2) { height: 165px !important; }
  [style*="font-size: 60px"] { font-size: 40px !important; }
  [style*="font-size: 58px"], [style*="font-size: 56px"] { font-size: 38px !important; }
  [style*="border-radius: 34px"], [style*="border-radius: 30px"] { padding-inline: 20px !important; }
  [style*="max-width: 1360px"], [style*="max-width: 1300px"],
  [style*="max-width: 1240px"], [style*="max-width: 1180px"] { padding-inline: 14px !important; }

  /* full-width primary actions read better on a phone */
  section a[style*="height: 58px"], section a[style*="height: 56px"],
  section button[type="submit"] { width: 100% !important; justify-content: center !important; }

  details summary { font-size: 17px !important; }
  footer > div { padding-inline: 18px !important; }
}