/* ==========================================================================
   home.css — Styles for index.html (homepage) only
   Horizon Access Solutions
   ========================================================================== */

/* ── Layout helpers ── */
.pad { padding-left: 40px; padding-right: 40px; }

/* ── Hero ── */
.hero-section { display: flex; min-height: 680px; position: relative; }

/* ── Grids ── */
.eq-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rent-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.why-grid     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stats-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.industry-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.area-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.qform-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.footer-grid  { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }

/* ── Responsive ── */
@media (max-width: 1060px) {
  .hero-section     { flex-direction: column !important; }
  .hero-right       { min-height: 400px !important; }
  /* Hide fleet card when hero stacks — card is desktop-only */
  .quote-card       { display: none !important; }
  .hero-left        { padding: 52px 32px 64px !important; align-items: flex-start !important; }
  .hero-left > div  { max-width: 100% !important; }
  .eq-grid          { grid-template-columns: repeat(2, 1fr) !important; }
  .rent-grid        { grid-template-columns: 1fr !important; }
  .why-grid         { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
  .service-grid     { grid-template-columns: 1fr !important; gap: 32px !important; }
  .industry-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .testi-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .area-grid        { grid-template-columns: 1fr !important; gap: 32px !important; }
  .qform-grid       { grid-template-columns: 1fr !important; gap: 36px !important; }
  .footer-grid      { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .service-photo    { height: 320px !important; }
  .map-photo        { height: 260px !important; }
}

@media (max-width: 768px) {
  .pad              { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-h1          { font-size: 48px !important; }
  .sec-h2           { font-size: 34px !important; }
  .hero-left        { padding: 40px 20px 44px !important; }
  /* Hide the floating fleet card — too tall for the image panel at this size */
  .quote-card       { display: none !important; }
  /* Image panel: tighter on mobile since no card overlay */
  .hero-right       { min-height: 260px !important; }
  .hero-stats       { gap: 20px !important; flex-wrap: wrap; }
  .eq-grid          { grid-template-columns: 1fr !important; }
  .why-grid         { grid-template-columns: 1fr !important; }
  .industry-grid    { grid-template-columns: 1fr !important; }
  .testi-grid       { grid-template-columns: 1fr !important; }
  .footer-grid      { grid-template-columns: 1fr !important; }
  .service-photo    { height: 260px !important; }
  .map-photo        { height: 220px !important; }
  .form-row         { grid-template-columns: 1fr !important; }
  .form-panel       { padding: 24px 20px 28px !important; border-radius: 8px !important; }
  #scroll-top       { display: none !important; }
}

@media (max-width: 480px) {
  .hero-h1          { font-size: 38px !important; line-height: 1 !important; }
  .sec-h2           { font-size: 28px !important; }
  .hero-left        { padding: 32px 18px 40px !important; }
  .hero-right       { min-height: 200px !important; }
  .stats-grid       { gap: 20px !important; }
  .footer-grid      { gap: 16px !important; }
  .hero-stats       { gap: 16px !important; }
  .hero-stats > div > div:first-child { font-size: 30px !important; }
}