﻿/* t1600u/t1601u: compact hero so the trust strip is on the first screen at ~1366x620 (Chrome with tabs+bookmarks).
   Loaded after home-fable-t1580.css. Delete this file's <link> in index.php to undo. */
@media (min-width:1000px){
  .hf-hero{padding:12px 0 10px}
  .hf-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.1rem,2.6vw,2.4rem)}
  .hf-hero h1{font-size:clamp(2rem,3vw,2.6rem);line-height:1.08;margin:10px 0 4px;white-space:nowrap}
  .hf-hero-copy>p{margin-top:4px;margin-bottom:6px}
  .hf-hero-copy ul{margin-top:8px;margin-bottom:0}
  .hf-hero-copy ul li{margin:0;line-height:1.45}
  .hf-langline{margin:8px 0 0;font-size:12.5px;line-height:1.5}
  .hf-hero-more{padding-top:6px}
  .hf-hero-more .hf-sub{font-size:14px}
  .hf-trust .wrap{padding-top:10px;padding-bottom:10px;gap:10px 22px}
  .hf-trust strong{font-size:14px}
  .hf-trust span{font-size:12.5px;line-height:1.35}
}
/* t1608u: dashboard and box back to their t1580 size (box 126px at >=1000px, 162px at >=1280px from home-fable-t1580.css) */
/* t1608u: room comes from the text gaps, not from the dashboard */
@media (min-width:1000px){
  .hf-hero{padding:10px 0 8px}
  .hf-hero h1{margin:8px 0 2px}
  .hf-tagline{margin:0 0 4px}
  .hf-lead{font-size:13.5px;line-height:1.38;margin:0 0 8px}
  .hf-offer{margin:0 0 8px}
  .btn.hf-btn-gold,.btn.hf-btn-ghost{padding:10px 22px}
  .hf-assure{margin:8px 0 0;gap:2px;line-height:1.3}
  .hf-langline{margin:6px 0 0;font-size:12px;line-height:1.4}
  .hf-hero-more{padding-top:4px}
  .hf-hero-more .hf-sub{font-size:13.5px}
}
/* t1621u: retail box back to the staging position (home-fable-t1580.css: left -16px/126px at >=1000, left -26px/162px at >=1280,
   bottom 4px) so it overlaps the bottom-left corner of the dashboard frame, not the text column. Dashboard size is untouched. */
@media (min-width:1000px){
  .hf-hero{padding:8px 0 6px}
  .hf-hero h1{font-size:clamp(1.9rem,2.8vw,2.4rem)}
  .hf-hero-art picture{left:-16px!important;bottom:4px!important;width:126px!important;max-width:126px!important}
}
@media (min-width:1280px){
  .hf-hero-art picture{left:-26px!important;width:162px!important;max-width:162px!important}
}