/* =====================================================================
   HORIZON STEEL — RESPONSIVE LAYER
   Loaded after style.css. Holds the final phone / tablet / laptop
   layout rules so they are not lost among the older overrides.
   Breakpoints: 1200 (small laptop) · 900 (tablet) · 600 (phone) · 380 (small phone)
===================================================================== */

/* Global safety: nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, svg, iframe { max-width: 100%; }

/* =====================================================================
   ABOUT PAGE
===================================================================== */

/* ---------- Hero ---------- */
@media (max-width: 900px) {
  .subpage-hero.about-hero {
    min-height: 0;
    padding: 140px 0 72px;
    align-items: flex-end;
  }
}
@media (max-width: 600px) {
  .subpage-hero.about-hero { padding: 118px 0 56px; }
  .subpage-hero .eyebrow { letter-spacing: .18em; font-size: 13px; }
}

/* ---------- 01 Who we are ---------- */
@media (max-width: 980px) {
  /* The worker photo is not used, so its empty column must not take space. */
  .hz-worker-wrap { display: none !important; }
  .hz-about-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .hz-affiliations { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 980px) {
  .hz-affiliations { padding: 56px 0 40px !important; }
  .hz-affiliations-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .hz-affiliations-line::before { display: none !important; }
  .hz-affiliation-dot { display: none !important; }
}
@media (max-width: 600px) {
  .hz-about-inner { padding-top: 56px !important; }
  .hz-about-stats { gap: 0; }
  .hz-affiliations { padding: 48px 0 32px !important; }
  .hz-affiliations-line { gap: 26px; }
  .hz-affiliation { grid-template-columns: 64px minmax(0, 1fr) !important; align-items: center; column-gap: 16px; }
  .hz-about-footer { margin-top: 24px; padding: 28px 20px !important; }
}

/* ---------- 02 / 03 Vision & Mission ---------- */
@media (max-width: 900px) {
  .hz-vision-mission { padding-top: 72px !important; padding-bottom: 72px !important; }
  .hz-vision-mission .hz-mission { padding-top: 64px !important; }
  .hz-diagonal-line { display: none !important; }
  .hz-vm-grid { padding-top: 0 !important; padding-bottom: 0 !important; }
  .hz-vision-mission .hz-vision { padding-top: 0 !important; padding-bottom: 0 !important; }
  .hz-vision-mission .hz-mission { padding-bottom: 0 !important; }
  .hz-value-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0; }
  .hz-value-row-four { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .hz-value { min-height: 0 !important; padding: 0 14px 6px !important; }
  .hz-value:first-child { padding-left: 0 !important; }
  .hz-value span { font-size: 10px; line-height: 1.5; }
}
@media (max-width: 600px) {
  .hz-value-row,
  .hz-value-row-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
  }
  .hz-value,
  .hz-value:first-child {
    padding: 16px 14px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(8, 29, 52, .45);
  }
  .hz-value .hz-icon { margin-bottom: 10px; }
  /* 3-item row: the last card spans both columns so the grid stays even. */
  .hz-value-row:not(.hz-value-row-four) .hz-value:last-child { grid-column: 1 / -1; }
}

/* ---------- Journey & milestones: vertical timeline below 1100px ---------- */
@media (max-width: 1100px) {
  .about-legacy-section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .legacy-section { margin-top: 0 !important; }
  .legacy-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    text-align: left !important;
    padding-bottom: 28px !important;
  }
  .legacy-heading > p { max-width: 620px !important; margin: 0 !important; }

  .timeline-cycle-arrows,
  .timeline-cycle-core { display: none !important; }

  .about-legacy-section .timeline-wrap {
    position: relative;
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    height: auto !important;
    margin-top: 12px !important;
    padding: 0 0 0 28px !important;
    border: 0 !important;
    background: none !important;
  }
  /* the vertical rail */
  .about-legacy-section .timeline-wrap::before {
    content: '' !important;
    position: absolute !important;
    top: 8px; bottom: 8px; left: 7px;
    width: 2px !important; height: auto !important;
    aspect-ratio: auto !important;
    border: 0 !important; border-radius: 0 !important;
    transform: none !important; box-shadow: none !important;
    background: linear-gradient(180deg, var(--gold-light, #5c9bff), rgba(92, 155, 255, .15)) !important;
  }
  .about-legacy-section .timeline-wrap::after { display: none !important; }

  .about-legacy-section .timeline-item,
  .about-legacy-section .timeline-item:nth-child(n),
  .about-legacy-section .timeline-item:nth-of-type(n) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 20px 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-left: 3px solid var(--gold-light, #5c9bff) !important;
    background: rgba(8, 29, 52, .82);
  }
  .about-legacy-section .timeline-item::before { display: none !important; }
  .about-legacy-section .timeline-dot {
    position: absolute !important;
    left: -27px !important; right: auto !important; top: 24px !important;
    width: 12px !important; height: 12px !important;
  }
  .about-legacy-section .timeline-year { min-height: 0 !important; margin-bottom: 10px; font-size: 10px; }
  .about-legacy-section .timeline-title { font-size: 19px; margin-bottom: 8px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .legacy-heading h3 { font-size: clamp(44px, 7vw, 60px) !important; }
}

/* ---------- Small laptop / tablet fixes for sections 01–04 ---------- */
@media (max-width: 1200px) {
  .hz-about-footer { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .hz-about-footer-divider { display: none !important; }
}
@media (max-width: 1366px) {
  .hz-diagonal-line { display: none !important; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .subpage-hero.about-hero { min-height: 0; padding: 170px 0 120px; }
}
.hz-eyebrow-line > span:not(.hz-line) { white-space: nowrap; }

/* ---------- 04 Strategic raw materials ---------- */
@media (max-width: 900px) {
  .hz-materials { padding-top: 72px !important; padding-bottom: 72px !important; }
  .hz-eyebrow-line {
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    font-size: 12px !important;
  }
  .hz-eyebrow-line > span:not(.hz-line) { flex: 0 0 auto; width: auto !important; white-space: nowrap; }
  .hz-eyebrow-line .hz-line { display: block !important; flex: 0 1 120px; width: auto !important; }
  .hz-comparison { margin-top: 40px !important; }
}
@media (max-width: 600px) {
  .hz-materials-heading { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .hz-materials-heading .hz-display-title { font-size: clamp(46px, 14vw, 64px) !important; }
  .hz-eyebrow-line .hz-line { flex-basis: 48px; }
  .hz-spec-row { gap: 6px !important; padding: 16px 0 !important; }
  .hz-spec-line { display: none !important; }
  .hz-alternative { margin-top: 40px; }
}

/* ---------- Certifications ---------- */
@media (max-width: 600px) {
  .about-certifications-inner h2 { font-size: clamp(36px, 11vw, 52px) !important; }
  .certification-badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center;
    gap: 16px !important;
    max-width: 340px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .certification-badge,
  .home-iso-certifications .certification-badge {
    width: min(140px, 40vw) !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1;
  }
}

/* =====================================================================
   FOOTER (all pages)
===================================================================== */
@media (max-width: 600px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 20px !important;
  }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .foot-bottom p { font-size: 12px !important; line-height: 1.6; }
}

/* =====================================================================
   SHARED SECTIONS (home, products, technology, sustainability)
===================================================================== */

/* Small laptops / tablets: 4-up card rows are too narrow for their copy. */
@media (max-width: 1200px) {
  .hz-sustainability-grid,
  .hz-application-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 40px 32px !important;
  }
}
@media (max-width: 600px) {
  .hz-sustainability-grid,
  .hz-application-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
}

/* Quality assurance block (home + technology): the photo overlapped the copy
   between 900px and 1200px. Stack it above the copy instead. */
@media (max-width: 1200px) {
  .qa-block {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  .qa-block > .sourcing-visual {
    width: 100% !important;
    max-width: 640px;
    margin: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
}
@media (max-width: 600px) {
  .qa-block .apps-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Subpage hero quick-link buttons (rebar, wire rod): even grid on phones. */
@media (max-width: 600px) {
  .quick-nav-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  .quick-nav-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 !important;
    padding: 12px 8px !important;
    white-space: normal !important;
    line-height: 1.35;
  }
  .quick-nav-bar > .quick-nav-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Contact details: long e-mail addresses wrap at a sensible point. */
.horizon-contact-info a { overflow-wrap: anywhere; }

/* =====================================================================
   REBAR — "Rebar in coil" showcase
===================================================================== */
@media (max-width: 1100px) {
  .coil-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .coil-visual { margin-top: 32px !important; }
  .coil-use-tag {
    top: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    max-width: calc(100% - 32px) !important;
    font-size: 11px !important;
    line-height: 1.4;
  }
}

/* =====================================================================
   HEADER — burger menu is used up to 1320px; keep the submenu arrow on
   the right of its label in that whole range (was only fixed ≤900px).
===================================================================== */
@media (min-width: 901px) and (max-width: 1320px) {
  .nav-links.open .nav-item-dropdown,
  .nav-links .nav-item-dropdown { position: relative; }
  .nav-links .dropdown-arrow {
    position: absolute;
    right: 0;
    top: 6px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .nav-links .dropdown-arrow svg { width: 14px; height: 14px; }
}
@media (max-width: 700px) {
  .coil-intro { padding-bottom: 28px; }
}