/* floridacostarica.com phone layout (v1, 2026-10-14).
   The pages are built at 1440px wide with inline styles. On screens 820px wide or less,
   these rules stack everything into one column. Shared by every page. */
@media (max-width: 820px) {
  html, body { background: #FFFFFF !important; }
  #wrap { width: 100% !important; transform: none !important; margin: 0 !important; }
  #wrap > div { width: 100% !important; }
  #wrap img, #wrap video { max-width: 100%; }

  /* Top bar: keep WhatsApp and languages, hide the long line */
  #wrap > div > div:first-child { height: auto !important; padding: 8px 16px !important; flex-wrap: wrap; gap: 6px; font-size: 12px !important; }
  #wrap > div > div:first-child > div:first-child > span:nth-child(n+2) { display: none; }
  #wrap > div > div:first-child > div:last-child { gap: 14px !important; }

  /* Header: logos on top, menu wraps under it */
  #wrap header { height: auto !important; padding: 14px 16px !important; flex-direction: column; align-items: flex-start !important; gap: 12px; }
  #wrap header > div { gap: 12px !important; flex-wrap: wrap; }
  #wrap header > div > a span:first-child { font-size: 22px !important; }
  #wrap header > div > span { height: 34px !important; }
  #wrap header img { height: 34px !important; }
  #wrap header nav { flex-wrap: wrap; gap: 8px 16px !important; font-size: 14px !important; }
  #wrap header nav a[href="contact.html"] { padding: 8px 14px !important; }

  /* Sections: phone padding, no fixed heights */
  #wrap section, #wrap footer, #wrap article { padding: 48px 16px !important; height: auto !important; min-height: 0 !important; gap: 28px !important; }
  #wrap article > div { width: 100% !important; }

  /* Type */
  #wrap h1 { font-size: 36px !important; line-height: 1.12 !important; }
  #wrap h2 { font-size: 28px !important; line-height: 1.18 !important; }
  #wrap h3 { font-size: 22px !important; }
  #wrap p { font-size: 16px !important; }

  /* Grids: one column; small fact grids two columns */
  #wrap [style*="grid-template-columns"] { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  #wrap [style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  #wrap [style*="grid-template-rows"] { grid-template-rows: none !important; }
  #wrap [style*="grid-column"], #wrap [style*="grid-row"] { grid-column: auto !important; grid-row: auto !important; }

  /* Rows that sit side by side on desktop stack on a phone */
  #wrap [style*="justify-content: space-between"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; gap: 14px !important; }
  #wrap section[style*="display: flex"][style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; }
  #wrap footer > div, #wrap footer nav { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  #wrap footer nav { flex-direction: row !important; flex-wrap: wrap; }
  #wrap footer [style*="align-items: flex-end"] { align-items: flex-start !important; }

  /* Big photos behind words: photo on top, words below */
  #wrap section > img[style*="inset: 0"], #wrap section > div > img[style*="inset: 0"] { position: relative !important; height: 300px !important; inset: auto !important; }
  #wrap .fade-b { display: none !important; }
  #wrap section > div[style*="position: absolute"][style*="background: #FFFFFF"] { position: relative !important; left: auto !important; top: auto !important; width: auto !important; margin: -40px 0 0 !important; padding: 28px 22px !important; }
  #wrap section[style*="position: relative"] { padding: 0 0 32px !important; }
  #wrap section[style*="position: relative"] > div[style*="position: absolute"] { margin: -40px 16px 0 !important; }

  /* Headshot card that floats over the photo */
  #wrap [style*="left: -60px"] { position: relative !important; left: auto !important; bottom: auto !important; width: 220px !important; height: 290px !important; margin: -150px auto 0 !important; }
  #wrap [style*="position: relative"]:has(> [style*="left: -60px"]) { min-height: 300px; padding-bottom: 20px; }

  /* Inner columns that had desktop side padding */
  #wrap section > div[style*="padding: 80px"], #wrap section > div[style*="padding: 90px"], #wrap section > div[style*="padding: 110px"] { padding: 8px 0 24px !important; }
  #wrap section [style*="align-items: center; gap: 28px"] { flex-wrap: wrap; gap: 16px !important; }
  #wrap [style*="height: 400px"]:not(img) { height: auto !important; }

  /* Fixed widths and tall images */
  #wrap [style*="width: 820px"], #wrap [style*="width: 720px"], #wrap [style*="width: 1100px"], #wrap [style*="width: 600px"], #wrap [style*="width: 580px"] { width: auto !important; max-width: 100% !important; }
  #wrap img[style*="height: 720px"], #wrap img[style*="height: 680px"], #wrap img[style*="height: 600px"], #wrap img[style*="height: 560px"], #wrap img[style*="height: 520px"], #wrap img[style*="height: 512px"], #wrap img[style*="height: 480px"], #wrap img[style*="height: 400px"], #wrap img[style*="height: 380px"], #wrap img[style*="height: 360px"] { height: 260px !important; }
  #wrap [style*="height: 560px"].todo-photo, #wrap .todo-photo[style*="width: 1100px"] { height: 200px !important; }
  #wrap video { height: auto !important; max-height: 70vh; }
  #wrap [style*="height: 300px"][style*="position: relative"] { height: 200px !important; }

  /* Contact band and other side-by-side bands */
  #wrap #contact { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }
  #wrap #contact img { width: 160px !important; height: 210px !important; }

  /* Listing side box no longer sticks */
  #wrap aside { position: static !important; }

  /* Trust line wraps */
  #wrap [style*="justify-content: center"][style*="letter-spacing: 0.04em"] { flex-wrap: wrap; gap: 8px 12px !important; padding: 16px !important; }

  /* Listing facts: two per row. Step line hidden. */
  #wrap [style*="gap: 14px; margin-top: 6px"] { grid-template-columns: 1fr 1fr !important; }
  #wrap svg[preserveAspectRatio="none"] { display: none !important; }

  /* Listing photos: big photo on top, small ones two per row */
  #wrap [style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #wrap [style*="grid-template-columns: 2fr 1fr 1fr"] > img:first-child { grid-column: 1 / -1 !important; height: 240px !important; border-radius: 12px !important; }
  #wrap [style*="grid-template-columns: 2fr 1fr 1fr"] > img:not(:first-child), #wrap [style*="grid-template-columns: 2fr 1fr 1fr"] > div, #wrap [style*="grid-template-columns: 2fr 1fr 1fr"] > div img { height: 130px !important; border-radius: 10px !important; }

  /* Gallery: big photo on top, two small under it */
  #wrap [style*="grid-template-columns: 2fr 1fr 1fr"] > figure:first-child { grid-column: 1 / -1 !important; }
  #wrap figure [style*="height: 380px"], #wrap figure img[style*="height: 380px"] { height: 170px !important; }

  /* Filter chips wrap */
  #wrap div[style^="display: flex; gap: 10px"] { flex-wrap: wrap; }

  /* Buttons: easy to tap */
  #wrap a[href^="https://wa.me"] { white-space: normal !important; }
}