/* AirlyGo V11.4.0D4.1.5.4 — Hotel Card Density + Shared Shell Alignment
   Presentation only. No LiteAPI, PREBOOK, reservation, booking, payment,
   Pay Later, supplier-booking, frozen-total or FX logic changes. */
:root{
  --ag4154-shell:1360px;
  --ag4154-gutter:24px;
  --ag4154-gutter-tablet:18px;
  --ag4154-gutter-mobile:12px;
}

/* Search and Hotel Details use the exact same public content shell as the header. */
body.hotel-search-page .nav-inner,
body.hotel-search-page .site-header .wrap,
body.hotel-search-page .search-dock>.wrap,
body.hotel-search-page .results-hero>.wrap,
body.hotel-search-page .results-main>.wrap,
body.hotel-details-page .nav-inner,
body.hotel-details-page .site-header .wrap,
body.hotel-details-page .ag-details-search-form,
body.hotel-details-page .details-header .wrap,
body.hotel-details-page .details-main>.wrap,
body.hotel-details-page #hotelApp>.wrap{
  width:min(var(--ag4154-shell),calc(100% - (var(--ag4154-gutter) * 2)))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Result cards: content controls growth; sparse data must not create tall cards. */
@media(min-width:901px){
  body.hotel-search-page .hotel-card{
    grid-template-columns:260px minmax(0,1fr) 270px!important;
    grid-template-rows:auto!important;
    min-height:238px!important;
    height:auto!important;
    align-items:stretch!important;
  }
  body.hotel-search-page .hotel-photo,
  body.hotel-search-page .hotel-photo.ag63b-carousel{
    min-height:238px!important;
    height:auto!important;
    align-self:stretch!important;
  }
  body.hotel-search-page .hotel-content,
  body.hotel-search-page .hotel-price-panel{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    align-self:stretch!important;
  }
  body.hotel-search-page .hotel-content{
    padding:16px 18px!important;
  }
  body.hotel-search-page .hotel-price-panel{
    padding:16px 18px!important;
    gap:10px!important;
  }
  body.hotel-search-page .hotel-title{font-size:20px!important}
  body.hotel-search-page .hotel-location{margin-top:6px!important}
  body.hotel-search-page .ag4152-details-link{margin-top:5px!important}
  body.hotel-search-page .ag415-stay-summary{margin-top:9px!important}
  body.hotel-search-page .ag4153-room-block{margin-top:8px!important}
  body.hotel-search-page .hotel-keyfacts{margin-top:8px!important}
  body.hotel-search-page .offer-badges{
    margin-top:9px!important;
    padding-top:0!important;
  }
  body.hotel-search-page .price-block{
    margin-top:auto!important;
    padding-top:8px!important;
  }
  body.hotel-search-page .availability-button{margin-top:10px!important}
}

/* Smaller desktop/tablet screens keep the same density; long copy can still grow naturally. */
@media(min-width:901px) and (max-width:1180px){
  body.hotel-search-page .hotel-card{grid-template-columns:220px minmax(0,1fr) 240px!important;min-height:232px!important}
  body.hotel-search-page .hotel-photo,
  body.hotel-search-page .hotel-photo.ag63b-carousel{min-height:232px!important}
}

/* Keep header/search/content edges identical as viewport gutters reduce. */
@media(max-width:1180px){
  body.hotel-search-page .nav-inner,
  body.hotel-search-page .site-header .wrap,
  body.hotel-search-page .search-dock>.wrap,
  body.hotel-search-page .results-hero>.wrap,
  body.hotel-search-page .results-main>.wrap,
  body.hotel-details-page .nav-inner,
  body.hotel-details-page .site-header .wrap,
  body.hotel-details-page .ag-details-search-form,
  body.hotel-details-page .details-header .wrap,
  body.hotel-details-page .details-main>.wrap,
  body.hotel-details-page #hotelApp>.wrap{
    width:calc(100% - (var(--ag4154-gutter-tablet) * 2))!important;
  }
}

@media(max-width:680px){
  body.hotel-search-page .nav-inner,
  body.hotel-search-page .site-header .wrap,
  body.hotel-search-page .search-dock>.wrap,
  body.hotel-search-page .results-hero>.wrap,
  body.hotel-search-page .results-main>.wrap,
  body.hotel-details-page .nav-inner,
  body.hotel-details-page .site-header .wrap,
  body.hotel-details-page .ag-details-search-form,
  body.hotel-details-page .details-header .wrap,
  body.hotel-details-page .details-main>.wrap,
  body.hotel-details-page #hotelApp>.wrap{
    width:calc(100% - (var(--ag4154-gutter-mobile) * 2))!important;
  }
}