/**
 * Industrio CMS adaptation layer.
 *
 * Canon rule: css/industrio.css is the untouched upstream visual baseline.
 * Native template DOM hooks are also upstream contract: preserve original IDs,
 * classes, component structure, responsive utility classes, and JS selector/options
 * wherever the corresponding upstream component is reused. CMS integration should
 * replace content/URLs/data, not rename native hooks. If an engine-only hook is
 * needed, ADD a scoped .industrio-* class or data-* attribute instead of replacing
 * the native selector. Do not broadly override native Industrio/Bootstrap layout,
 * positioning, widths, responsive behavior, or component states. Any unavoidable
 * deviation must be justified, dependency-checked against upstream HTML/CSS/JS,
 * narrowly scoped, and smoke-tested on desktop + mobile before release.
 */

.industrio-brand-logo { display:block; max-width:220px; max-height:58px; width:auto; height:auto; object-fit:contain; position:relative; z-index:1; }
.industrio-text-logo { position:relative; z-index:1; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.industrio-home-spacer { height:2rem; }
.industrio-hero-image { min-height:560px; max-height:760px; object-fit:cover; }
.industrio-hero-fallback { background:linear-gradient(120deg,#02245B,#153b75); }
.industrio-hero-description { max-width:760px; font-size:1.15rem; line-height:1.8; }
.industrio-about-frame { position:relative; padding:0 2rem 2rem 0; }
.industrio-about-frame::after { content:""; position:absolute; right:0; bottom:0; width:55%; height:55%; background:var(--primary); z-index:-1; }
.industrio-media-placeholder { display:flex; align-items:center; justify-content:center; background:#e9edf2; color:var(--primary); }
.industrio-media-placeholder i { font-size:3rem; }
.industrio-service-cover { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.industrio-service-thumb { width:100%; height:100%; }
.industrio-product-card, .industrio-article-card, .industrio-project-card, .industrio-branch-card, .industrio-download-card, .industrio-form-card, .industrio-testimonial-static { box-shadow:0 0 45px rgba(0,0,0,.07); }
.industrio-product-card, .industrio-article-card, .industrio-project-card { overflow:hidden; display:block; color:inherit; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; }
.industrio-product-card:hover, .industrio-article-card:hover, .industrio-project-card:hover { transform:translateY(-5px); box-shadow:0 15px 45px rgba(0,0,0,.12); color:inherit; }
.industrio-product-card img, .industrio-article-card img, .industrio-project-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.industrio-product-placeholder, .industrio-article-placeholder, .industrio-project-placeholder { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:#e9edf2; color:var(--primary); }
.industrio-product-placeholder i, .industrio-article-placeholder i, .industrio-project-placeholder i { font-size:3rem; }
.industrio-project-carousel-image { width:100%; aspect-ratio:4/3; object-fit:cover; }
.industrio-client-card { min-height:120px; display:flex; align-items:center; justify-content:center; padding:1.5rem; border:1px solid #e7e7e7; background:#fff; }
.industrio-client-card a { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--dark); text-decoration:none; font-weight:600; text-align:center; }
.industrio-client-card img { width:100%; max-width:150px; max-height:70px; object-fit:contain; }
.industrio-team-image { width:100%; aspect-ratio:4/3; object-fit:cover; }
.industrio-testimonial-avatar { width:100px; height:100px; display:flex; align-items:center; justify-content:center; background:#e9edf2; color:var(--primary); font-size:2.5rem; }
.industrio-testimonial-static img { width:100px; height:100px; object-fit:cover; }
.industrio-gallery-card { position:relative; display:block; overflow:hidden; min-height:260px; background:var(--dark); }
.industrio-gallery-card img { width:100%; height:100%; min-height:260px; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease; }
.industrio-gallery-card:hover img { transform:scale(1.05); }
.industrio-gallery-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,36,91,.35); color:#fff; opacity:0; transition:opacity .3s ease; }
.industrio-gallery-overlay i { font-size:3rem; }
.industrio-gallery-card:hover .industrio-gallery-overlay { opacity:1; }
.industrio-gallery-title { position:absolute; left:0; right:0; bottom:0; padding:1rem; color:#fff; font-weight:600; background:linear-gradient(transparent,rgba(2,36,91,.95)); }
.industrio-accordion .accordion-item { border:0; margin-bottom:1rem; box-shadow:0 0 30px rgba(0,0,0,.06); }
.industrio-accordion .accordion-button { font-family:'Rubik',sans-serif; font-weight:600; }
.industrio-branch-card a, .industrio-download-card a { text-decoration:none; }
.industrio-detail-image, .industrio-article-hero { max-height:640px; object-fit:cover; }
.industrio-project-meta { display:grid; gap:.75rem; }
.industrio-project-meta > div { display:flex; gap:1rem; padding-bottom:.75rem; border-bottom:1px solid #eee; }
.industrio-project-meta strong { min-width:90px; color:var(--dark); }
.industrio-home-contact .form-label { color:var(--dark); }
.rich-content { line-height:1.8; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { margin-top:1.75rem; margin-bottom:.85rem; font-family:'Rubik',sans-serif; color:var(--dark); }
.rich-content h1 { font-size:2.25rem; }
.rich-content h2 { font-size:1.9rem; }
.rich-content h3 { font-size:1.6rem; }
.rich-content h4 { font-size:1.35rem; }
.rich-content h5 { font-size:1.15rem; }
.rich-content h6 { font-size:1rem; }
.rich-content img { max-width:100%; height:auto; }
.rich-content table { width:100%; display:block; overflow-x:auto; }
.rich-content blockquote { border-left:4px solid var(--primary); padding-left:1rem; color:var(--secondary); }

@media (max-width: 991.98px) {
    .industrio-brand-logo { max-width:170px; max-height:52px; }
    .industrio-hero-image { min-height:480px; }
    .industrio-hero-description { font-size:1rem; }
}
@media (max-width: 767.98px) {
    .industrio-hero-image { min-height:450px; }
    .industrio-about-frame { padding:0 1rem 1rem 0; }
    .industrio-gallery-card, .industrio-gallery-card img { min-height:220px; }
}

/*
 * CMS hero-copy safety: dynamic titles can be longer than the upstream demo copy.
 * Keep native #header-carousel/.carousel-caption markup and only scale typography
 * inside the hero at mobile breakpoints so content remains inside the 450px slide.
 */
@media (max-width: 767.98px) {
    #header-carousel .carousel-caption h1.display-1 {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.1;
        margin-bottom: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    #header-carousel .carousel-caption h1.display-1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }
}