/* =========================================================================
   css/home-desktop-search-fix.css (HOME ONLY)
   Desktop-only (>= 992px) layout for search-card (Transfer + Hourly)
   - Mobile/tablet untouched.
   - Fixes HOURLY duration: removes legacy max-width:140px + absolute unit label.
   - Keeps JS show/hide working.
   ========================================================================= */

@media (min-width: 992px){
  /* Layout:
     Row 1: Locations (col1-2) | Date (col3)
     Row 2: Time (col1) | Middle (Duration OR Roundtrip) (col2) | Button (col3)
     Row 3 (optional / transfer roundtrip): Return Date (col1) | Return Time (col2)
  */

  body.home-page .search-card.search-card--home.search-card--beige .form-row{
    display: grid !important;
    grid-template-columns:
      minmax(520px, 1.9fr)
      minmax(520px, 1.9fr)
      minmax(320px, 360px);
    grid-template-rows: auto auto auto;
    column-gap: 14px !important;
    row-gap: 14px !important;
    align-items: stretch !important;
  }

  /* Locations row spans col1-2 (only one visible via JS) */
  body.home-page .search-card.search-card--home.search-card--beige #mainLocationRow,
  body.home-page .search-card.search-card--home.search-card--beige #hourlyLocationRow{
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
  }

  /* Flatten date-row into parent grid */
  body.home-page .search-card.search-card--home.search-card--beige .date-row{
    display: contents !important;
  }

  /* Date -> row1 col3 */
  body.home-page .search-card.search-card--home.search-card--beige .date-row .date-group{
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  /* Time -> row2 col1 */
  body.home-page .search-card.search-card--home.search-card--beige .date-row .time-group:not(.return-time-wrapper){
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  /* Middle cell -> row2 col2 (duration OR roundtrip) */
  body.home-page .search-card.search-card--home.search-card--beige .date-row .duration-group{
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;           /* CRITICAL: undo css/style.css max-width:140px */
    justify-self: stretch !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;            /* undo flex:0 0 auto from legacy */
  }

  body.home-page .search-card.search-card--home.search-card--beige .trip-type-inline--beige{
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    /* JS toggles visibility; do not use display:... !important */
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,0.06) !important;
  }

  /* Search button -> row2 col3 */
  body.home-page .search-card.search-card--home.search-card--beige #searchButton{
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    height: 64px !important;
    border-radius: 18px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    white-space: nowrap !important;
  }

  /* Return date/time -> row3 col1/2 */
  body.home-page .search-card.search-card--home.search-card--beige .date-row .return-date-wrapper{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  body.home-page .search-card.search-card--home.search-card--beige .date-row .return-time-wrapper{
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  /* ---------------- HOURLY duration internal layout ----------------
     Legacy issues from css/style.css:
       - .search-card .duration-group { max-width:140px; position:relative; }
       - .search-card .duration-group .unit-label { position:absolute; ... }
     We hard-reset those ONLY on home desktop.
  */

  /* Keep hidden when JS hides it */
  body.home-page .search-card.search-card--home.search-card--beige .duration-group[style*="display:none"],
  body.home-page .search-card.search-card--home.search-card--beige .duration-group[style*="display: none"]{
    display: none !important;
  }

  /* When visible -> enforce grid (overrides field-group flex) */
  body.home-page .search-card.search-card--home.search-card--beige
  .duration-group:not([style*="display:none"]):not([style*="display: none"]){
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto; /* icon | main | unit */
    gap: 12px !important;
    align-items: center !important;
    min-height: 64px !important;
  }

  body.home-page .search-card.search-card--home.search-card--beige .duration-group .field-text{
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body.home-page .search-card.search-card--home.search-card--beige .duration-group .field-label{
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: rgba(0,0,0,0.55) !important;
    white-space: nowrap !important;
  }

  body.home-page .search-card.search-card--home.search-card--beige .duration-group input[type="number"]{
    width: 190px !important;
    max-width: 190px !important;
    font-size: 20px !important;
    height: 32px !important;
  }

  /* HARD reset legacy absolute positioning */
  body.home-page .search-card.search-card--home.search-card--beige .duration-group .unit-label{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    pointer-events: none !important; /* unit is decorative */
    margin: 0 !important;

    justify-self: end;
    align-self: start !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    white-space: nowrap !important;
  }
}

/* Slightly wider card on medium desktops */
@media (min-width: 992px) and (max-width: 1200px){
  body.home-page .search-card.search-card--home.search-card--beige{
    width: calc(98vw - var(--ta-safe-left) - var(--ta-safe-right)) !important;
    max-width: calc(98vw - var(--ta-safe-left) - var(--ta-safe-right)) !important;
  }
}