/* ==========================================================================
   Public pages on tablets and phones (index, rooms, room, about, post, post-confirm).
   Loaded LAST on those pages, together with the viewport meta tag.
   Desktop (wider than 1024px) is untouched: every rule lives inside a media query.
   Same colours, fonts and components — only the layout changes:
     · ≤1024px (tablets): narrower margins, 2 cards per row, details stacked.
     · ≤600px  (phones):  1 card per row, search fields one under another, big buttons.
   Phones get a "☰" menu in the header (same as the Room Wanted pages, css/wanted/header.css).
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

/* ---------- Tablets and small laptops ---------- */
@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
  }

  /* Header: logo + "List your place" on top, section links (scrollable) + "Log in" below */
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
    padding: 12px var(--gutter);
  }
  .site-header__actions { display: contents; }
  .site-header__brand { grid-column: 1; grid-row: 1; }
  .site-header__cta { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-header__nav {
    grid-column: 1;
    grid-row: 2;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .site-header__nav::-webkit-scrollbar { display: none; }
  .site-header__actions > .site-header__link {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    white-space: nowrap;
  }

  /* Home: search card in two columns */
  .search-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .search-card__check { padding-bottom: 0; }
  .search-card__button { justify-content: center; }

  /* Cards: 2 per row */
  .card-row,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Rooms: filters wrap onto two rows */
  .filter-bar { flex-wrap: wrap; }
  .filter-bar__field { flex: 1 1 calc(50% - 7px); }
  .filter-bar__field--search { flex-basis: 100%; }
  .filter-bar__apply { flex: 1 1 100%; }
  .filter-bar__check { flex: 1 1 100%; padding: 4px 2px; }

  /* Room detail: contact card goes under the price, full width */
  .room-gallery { height: 380px; }
  .room-body {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .room-body__main { order: 1; }
  .room-contact {
    order: 0;
    position: static;
  }
  .room-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Footer: 2 columns */
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__about { grid-column: 1 / -1; }
}

/* ---------- Narrow tablets ---------- */
@media (max-width: 860px) {
  .value-props { grid-template-columns: 1fr; gap: 28px; }
  .value-props__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
  }
  .value-props__icon { grid-row: span 2; }

  .steps { flex-direction: column; }

  .about-callout__box { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
  }

  /* Header: "☰" button (in place of the logo), "Log in" and "List your place".
     The four section links open as a drop-down under the header when "☰" is tapped. */
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 12px;
    row-gap: 0;
    padding: 10px var(--gutter);
  }
  .site-header__brand { display: none; }
  .site-header__menu {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-teal);
    cursor: pointer;
  }
  .site-header__menu-line {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--color-surface);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Open: the three lines turn into an "X" */
  .site-header--open .site-header__menu-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header--open .site-header__menu-line:nth-child(2) { opacity: 0; }
  .site-header--open .site-header__menu-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .site-header__actions > .site-header__link { grid-column: 3; grid-row: 1; justify-self: end; font-size: 15px; }
  .site-header__cta { grid-column: 4; grid-row: 1; font-size: 14px; padding: 10px 14px; }

  .site-header__nav {
    display: none;
    /* auto placement: the drop-down spans the whole header, not one grid cell */
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    overflow: visible;
    white-space: normal;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 14px 28px rgba(10, 76, 75, 0.14);
  }
  .site-header--open .site-header__nav { display: flex; }
  .site-header__nav .site-header__link {
    font-size: 16px;
    padding: 14px var(--gutter);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .site-header__nav .site-header__link--active {
    border-left-color: var(--color-teal);
    background: var(--color-teal-faint);
  }

  /* Hero */
  .hero { padding: 36px var(--gutter) 88px; }
  .hero__badge { font-size: 11px; padding: 5px 12px; }
  .hero__title { font-size: 30px; }
  .hero__text { font-size: 15.5px; line-height: 1.5; }

  /* Search: one field under another, big full-width button */
  .search-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    margin-top: -60px;
  }
  .search-card__value { font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
  .search-card__check { font-size: 15px; }
  .search-card__button { font-size: 16px; padding: 14px; }

  /* Available-now strip */
  .available-now { padding-top: 32px; }
  .available-now__box { flex-direction: column; align-items: stretch; padding: 18px; }
  .available-now__button { text-align: center; padding: 12px; }

  .value-props { padding: 40px var(--gutter); }

  /* Featured rooms */
  .featured__head { flex-wrap: wrap; gap: 4px 12px; }
  .featured__title { font-size: 22px; }

  /* Cards: 1 per row, bigger photo */
  .card-row,
  .card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .room-card__media { height: 200px; }
  .room-card__title { min-height: 0; }
  .room-card__cta { font-size: 15px; padding: 13px; }

  /* How it works + call-to-action bands */
  .how-it-works { padding: 40px var(--gutter); gap: 24px; }
  .how-it-works__title { font-size: 24px; }
  .step { padding: 22px; }

  .owner-cta { padding: 40px var(--gutter); }
  .owner-cta__title { font-size: 21px; }
  .owner-cta__button { width: 100%; box-sizing: border-box; text-align: center; }

  .wanted-cta { padding: 24px 20px; margin-bottom: 40px; }
  .wanted-cta__title { font-size: 20px; }
  .wanted-cta__button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
  }

  /* Rooms listing */
  .listing-head { padding-top: 28px; }
  .listing-head__title { font-size: 24px; }
  .filter-bar { padding: 14px; gap: 10px; }
  .filter-bar__field { flex-basis: 100%; padding: 12px 14px; }
  .filter-bar__input,
  .filter-bar__value { font-size: 16px; }
  .filter-bar__apply { font-size: 16px; padding: 14px; }
  .filter-bar__check { font-size: 16px; }
  .listing-sort { padding-top: 20px; justify-content: flex-start; }
  .pagination { padding-bottom: 40px; }

  /* Room detail */
  .breadcrumb { padding-top: 16px; flex-wrap: wrap; row-gap: 2px; }
  .breadcrumb__current {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .room-gallery { height: 280px; padding-top: 12px; }
  .room-gallery__side { display: none; }
  .room-gallery__arrow { width: 44px; height: 44px; }
  .room-head { flex-direction: column; gap: 14px; padding-top: 20px; }
  .room-head__tags { flex-wrap: wrap; }
  .room-head__title { font-size: 23px; line-height: 1.25; }
  .room-head__pricing { text-align: left; }
  .room-head__price { font-size: 26px; }
  .room-body { padding: 24px var(--gutter) 40px; gap: 28px; }
  .room-contact { padding: 18px; }
  .room-contact__button { font-size: 16px; padding: 14px; }
  .room-cal__arrow { width: 44px; height: 44px; font-size: 20px; }
  .room-cal__day { font-size: 14px; }
  .request-form__input { font-size: 16px; }
  .room-description { font-size: 15px; }
  .room-features__item { font-size: 14.5px; }
  .room-map { height: 160px; padding: 0 16px; box-sizing: border-box; text-align: center; }
  .room-map.room-map--live { height: 240px; padding: 0; text-align: left; }
  .similar-rooms { padding-bottom: 40px; }
  .similar-rooms__title { font-size: 20px; padding-top: 28px; }

  /* About page */
  .about-intro { padding: 36px var(--gutter) 28px; }
  .about-intro__title { font-size: 26px; }
  .about-callout__box { padding: 24px 20px; }
  .faq__item { padding: 16px 18px; }
  .contact-band { flex-direction: column; align-items: stretch; padding-bottom: 40px; }
  .contact-band__body { padding: 32px 0 16px; }
  .contact-band__button { text-align: center; padding: 14px; }

  /* Footer */
  .site-footer { padding-top: 40px; }
  .site-footer__top { gap: 24px; }
  .site-footer__col:last-child { grid-column: 1 / -1; }
}