/* =========================================================================
   css/home-horizontal-premium.css — Home search-card (HORIZONTAL) premium tune
   Goal: Desktop/tablet horizontal layout without tiny inputs. Mobile stays stacked.
   Loaded AFTER home-polish.css
   IMPORTANT: No JS behavior changes. Do NOT force display on JS-toggled blocks.
   ========================================================================= */

body.home-page .search-card.search-card--home.search-card--beige{
  width: calc(96vw - var(--ta-safe-left) - var(--ta-safe-right)) !important;
  max-width: 1180px !important;
}

/* ============ Desktop: single-row horizontal (>= 992px) ============ */
@media (min-width: 992px){
  body.home-page .search-card.search-card--home.search-card--beige .form-row{
    display: grid !important;
    grid-template-columns: minmax(520px, 1fr) minmax(320px, 360px) minmax(200px, 230px);
    grid-template-areas:
      "locations datetime submit"
      "trip      datetime submit";
    column-gap: 14px !important;
    row-gap: 12px !important;
    align-items: stretch !important;
  }

  /* Grid areas */
  body.home-page .search-card.search-card--home.search-card--beige .location-row{ grid-area: locations; }
  body.home-page .search-card.search-card--home.search-card--beige .date-row{ grid-area: datetime; }
  body.home-page .search-card.search-card--home.search-card--beige .trip-type-inline{ grid-area: trip; }
  body.home-page .search-card.search-card--home.search-card--beige .btn-search{ grid-area: submit; }

  /* Make the button feel like a primary CTA card */
  body.home-page .search-card.search-card--home.search-card--beige .btn-search{
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    font-size: 18px !important;
    border-radius: 20px !important;
  }
}

/* ============ Tablet: two-row (768–991px) ============ */
@media (min-width: 768px) and (max-width: 991px){
  /* Keep existing home-improvements grid behavior but widen the card a bit */
  body.home-page .search-card.search-card--home.search-card--beige{
    max-width: 980px !important;
  }

  /* Ensure inputs stay comfortable */
  body.home-page .search-card.search-card--home.search-card--beige .field-group{
    padding: 14px 16px !important;
  }
}

/* ============ Inputs: never tiny ============ */
body.home-page .search-card.search-card--home.search-card--beige .field-group .form-control,
body.home-page .search-card.search-card--home.search-card--beige .field-group input[type="text"],
body.home-page .search-card.search-card--home.search-card--beige .field-group input[type="search"],
body.home-page .search-card.search-card--home.search-card--beige .field-group input[type="date"],
body.home-page .search-card.search-card--home.search-card--beige .field-group input[type="time"],
body.home-page .search-card.search-card--home.search-card--beige .field-group input[type="number"]{
  font-size: 18px !important;
  height: 30px !important;
}

/* Date/time readability on small devices */
@media (max-width: 480px){
  body.home-page .search-card.search-card--home.search-card--beige .date-row .date-group input[type="date"],
  body.home-page .search-card.search-card--home.search-card--beige .date-row .time-group input[type="time"]{
    font-size: 16px !important;
  }
}