/* Shared fixes for product, location and guide pages (not the home page).
   Loaded after each page's own <style>, so equal-specificity rules here win. */

/* 1. Images. Every <img> carries width/height attributes for layout stability.
   The height attribute becomes a CSS height, which beat each card's
   aspect-ratio and gave a 3500x1969 photo a 1969px-tall card. :where() keeps
   this at zero specificity, so any class rule that sets a height still wins. */
:where(img) { height: auto; max-width: 100%; }

/* 2. Content is visible by default. The scroll-reveal hid whole sections until
   JavaScript marked them in view, leaving blank black areas before scrolling,
   in print, in full-page screenshots and when the script failed. */
.reveal, .reveal.in-view, .reveal.visible,
.reveal.slide-from-left, .reveal.slide-from-right,
.slide-from-left, .slide-from-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* 3. Card grids: equal heights, one image ratio, nothing cropped to a sliver. */
.related-grid { align-items: stretch; }
.related-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    background: #111;
}
.related-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #1a1a1a;
    flex: 0 0 auto;
}
.related-card-info { flex: 1 1 auto; }
.related-card-info h3 { line-height: 1.3; }
.related-card-info p { color: rgba(255,255,255,0.6) !important; line-height: 1.45; }
@media (min-width: 769px) {
    /* a lone card in the last row of a 2-up grid stays card-sized */
    .related-grid { grid-auto-rows: 1fr; }
}

/* 4. Product spec bar under the hero: labels wrap instead of running into
   the next column, and the six specs sit as 3 x 2 until there is room. */
.pb-specs { align-items: start; }
.pb-spec-label {
    white-space: normal !important;
    line-height: 1.3;
    letter-spacing: 1px !important;
    overflow-wrap: anywhere;
}
.pb-spec-value {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3;
}
@media (max-width: 1360px) {
    .pb-specs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 14px !important; }
}
@media (max-width: 480px) {
    .pb-specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .pb-spec-label { font-size: 9px !important; }
}

/* Hero spec row: on phones the four figures go 2 x 2 so labels can wrap. */
.hero-spec-label { line-height: 1.3; }
@media (max-width: 600px) {
    .product-hero-specs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }
    .hero-spec { padding: 0 10px !important; border-right: none !important; min-height: 0 !important; }
    .hero-spec:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1) !important; }
    .hero-spec-label { white-space: normal !important; }
    .hero-spec-value { min-height: 0 !important; line-height: 1.15 !important; }
}

/* 5. "All products" link: its fade-in animation held opacity at 1 for good,
   overriding the script that hides it once you scroll past the hero, so it
   floated over cards and text all the way down the page. */
.back-link { animation: none !important; opacity: 1; transition: opacity 0.3s ease, color 0.3s ease; }

/* 6. Footer. The menu opens itself at the end of the page; keep the footer
   text clear of it, and keep the background quiet. */
.footer-overlay { background: rgba(6,8,7,0.78) !important; }
.footer-bg { filter: saturate(0.85); }
@media (min-width: 1100px) {
    .footer-content {
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: center !important;
        padding: 0 40px 12vh 56px !important;
        max-width: calc(50% - 250px);
    }
    .footer-title { font-size: clamp(26px, 2.6vw, 38px) !important; }
    .footer-details { align-items: flex-start !important; }
    .footer-address { text-align: left !important; }
}
@media (max-width: 1099px) {
    .footer-content { padding-top: clamp(28px, 6vh, 64px) !important; gap: 12px !important; }
    .footer-logo { width: 40px !important; height: 40px !important; }
    .footer-title { font-size: clamp(20px, 3.4vw, 30px) !important; max-width: 420px; }
}

/* 7. Wide tables scroll inside themselves on phones instead of pushing the
   whole page sideways. */
@media (max-width: 768px) {
    main table, .page-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 8. Print: no fixed chrome on top of the content. */
@media print {
    .bottom-area, .menu-overlay, .close-btn, .cursor, .page-transition,
    .site-footer, .back-link, .navbar { display: none !important; }
    .page-content-bottom { margin-bottom: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* 9. First screen on desktop: the hero is a little shorter so the white spec
   bar clears the floating Menu / Get Quote pill instead of sitting under it. */
@media (min-width: 769px) {
    .product-hero { min-height: min(78vh, calc(100vh - 260px)) !important; padding-top: 88px !important; padding-bottom: clamp(56px, 5vw, 76px) !important; }
}

/* 10. Phones: the footer's small print sat under the back-to-top button. */
@media (max-width: 640px) and (min-height: 740px) {
    .footer-bottom-bar { bottom: auto !important; top: clamp(250px, 32vh, 290px); }
}

/* 11. Small labels over photos were 50% white; lift them to a readable level. */
.hero-spec-label { color: rgba(255,255,255,0.74) !important; }

/* 12. Contrast. Brand green (#4CAF50) on the off-white sections is 2.5:1;
   a deeper shade of the same green keeps the accent and passes. */
.light-section h2 i, .light-section h3 i, .light-section p i,
.light-section .why-heading i, .light-section .process-step-num,
.light-section .stat-value span, .sys-index-col h3,
.related[style*="#fafafa"] .faq-toggle { color: #2e7d32 !important; }
.light-section .section-tag, .light-section .swatch-label, .swatch-label { color: #5f5f5a !important; }
/* the FAQ block reuses .related on an off-white background; its heading was white */
.related[style*="#fafafa"] { padding-top: 72px; }
.related[style*="#fafafa"] .related-title { color: rgba(0,0,0,0.6) !important; }

/* Breadcrumb on About and project pages inherited black text on the dark page. */
.page-content .apex-breadcrumb, body > .apex-breadcrumb { color: rgba(245,245,240,0.72); }

/* Footer link lists and two guide-page buttons had no styles at all
   (browser-default blue on black). */
.apex-related { color: #f5f5f0; }
.apex-related a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(245,245,240,0.25); }
.cta-buttons a.btn-primary, .cta-buttons a.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 30px; border-radius: 100px; text-decoration: none;
    font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
}
.cta-buttons a.btn-primary { background: #4CAF50; color: #fff; box-shadow: 0 4px 12px rgba(76,175,80,0.3); }
.cta-buttons a.btn-secondary { border: 1px solid rgba(255,255,255,0.25); color: #fff; }
.cta-buttons:has(.btn-primary) { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 32px 0 48px; }

/* 13. Logo and "All products / All areas" link. They were fixed to the top of
   the window with no background; on 80 pages nothing hid them, so they sat on
   top of cards and headings all the way down. They now scroll away with the
   page header. (The floating Menu / Get Quote pill stays.) */
.navbar, .back-link { position: absolute !important; }

/* 14. Same hide-until-scrolled pattern under other names on About and the
   project pages. */
.fade-up, .belief-item, .process-step, .manifesto-sub, .section-tag,
.project-hero-img, .meta-row, .gallery-img, .service-used-card, .more-project-item,
.cat-grid, .bento-card, .project-item {
    opacity: 1 !important;
    transform: none !important;
}
/* A portrait photo on its own in a project gallery is capped at a screen's
   height rather than running to 1700px. */
.gallery-img > img { max-height: min(90vh, 1100px); }

/* Plain text links inside content were browser-default blue on black. */
.page-content a:not([class]):link, .page-content a:not([class]):visited { color: #8fd773; }
.page-content .light-section a:not([class]):link,
.page-content .light-section a:not([class]):visited { color: #2e7d32; }