/* ============================================================
   mobile.css — responsive overrides for Tallinn City Apartments
   Pages are desktop-first with inline styles; this layer adapts
   them for tablet (<=1080px) and phone (<=760px) widths.
   ============================================================ */

/* Allow pages to shrink below the desktop canvas */
@media (max-width: 1400px) {
  body { min-width: 0 !important; }
  img { max-width: 100%; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  main div[style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  main div[style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  main div[style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  main div[style*="grid-template-columns:480px 1fr"],
  main div[style*="grid-template-columns:1fr 480px"] { grid-template-columns: 1fr 1fr !important; }

  /* header + nav wrap instead of overflowing */
  header { flex-wrap: wrap; row-gap: 12px; }
  header nav { flex-wrap: wrap; row-gap: 12px; }

  /* utility bar wraps */
  body > div[style*="justify-content:space-between"] { flex-wrap: wrap; row-gap: 6px; }
  body > div[style*="justify-content:space-between"] > div { flex-wrap: wrap; }

  /* index booking bar: allow fields to wrap so the fixed 190px button never overflows */
  main div[style*="bottom:-56px"] { flex-wrap: wrap; }
  main div[style*="bottom:-56px"] > div { min-width: 0; }
  main div[style*="bottom:-56px"] > a { flex: 1 0 100% !important; padding: 16px 0; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  /* single column everywhere */
  main div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  footer div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* gutters: 48px desktop rails -> 20px */
  header, footer, main > div,
  body > a:not(.skip),
  body > div[style*="justify-content:space-between"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* vertical rhythm: compress oversized section padding */
  main > div[style*="padding:110px"] { padding-top: 48px !important; }
  main > div[style*="padding:96px"]  { padding-top: 48px !important; }
  main > div[style*="padding:80px"]  { padding-top: 44px !important; }
  main > div[style*="padding:72px"]  { padding-top: 40px !important; padding-bottom: 40px !important; }
  main > div[style*="padding:64px"]  { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* display type scale */
  [style*="font-size:66px"] { font-size: 38px !important; }
  [style*="font-size:60px"] { font-size: 36px !important; }
  [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size:52px"] { font-size: 36px !important; }
  [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size:42px"] { font-size: 29px !important; }
  [style*="font-size:40px"] { font-size: 28px !important; }
  [style*="font-size:38px"] { font-size: 27px !important; }
  [style*="font-size:36px"] { font-size: 26px !important; }
  [style*="font-size:34px"] { font-size: 25px !important; }

  /* kill fixed hero/photo heights */
  main div[style*="height:600px"] { height: auto !important; padding-bottom: 28px; }
  main img[style*="height:520px"],
  main div[style*="height:520px"],
  main img[style*="height:460px"],
  main div[style*="height:440px"],
  main div[style*="height:360px"] { height: 300px !important; }
  main img[style*="height:300px"],
  main img[style*="height:290px"] { height: 240px !important; }

  /* hero copy block (index) */
  main div[style*="padding:96px 48px 0"] { padding: 56px 20px 36px !important; }

  /* index booking bar: absolute strip -> stacked card in flow */
  main div[style*="bottom:-56px"] {
    position: static !important;
    flex-direction: column !important;
    margin: 0 20px;
  }
  main div[style*="bottom:-56px"] > div {
    border-right: none !important;
    border-bottom: 1px solid #e6dfcd;
  }
  main div[style*="bottom:-56px"] > a { flex: none !important; padding: 16px !important; }

  /* flex rows with space-between collapse gracefully */
  main div[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap; row-gap: 18px; }
  main div[style*="display:flex"][style*="justify-content:center"] { flex-wrap: wrap; }
  footer > div[style*="display:flex"] { flex-wrap: wrap; row-gap: 10px; }

  /* forms: 16px prevents iOS auto-zoom */
  input, select { font-size: 16px !important; }

  /* decorative clip on breakfast photo scales down */
  main img[style*="clip-path"] { clip-path: inset(0 round 60px 60px 0 0) !important; }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px) {
  header nav a { font-size: 13.5px; }
  [style*="letter-spacing:0.28em"] { letter-spacing: 0.18em !important; }
}