/* hero-fixes.css
   SIMPLIFIED - Clean theme switching without flicker
   Only essential rules for light/dark mode hero styling
*/

/* ===== BASE STYLES FOR HERO ELEMENTS ===== */
.hero-industrial-premium,
.aula-hero,
.capac-hero-refined,
.monitoreo-hero {
    position: relative;
    min-height: 500px;
    display: block;
}

.hero-empresa,
.hero-mintra {
    position: relative;
    min-height: 500px;
    display: block;
}

.aula-hero .container,
.hero-empresa .container {
    position: relative;
    z-index: 10;
}

.intro-bg,
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}

/* ===== CORE RULE: NO TRANSITIONS ON THEME CHANGE ===== */
html[data-theme] {
    transition: none !important;
}

.intro-bg,
.hero-bg-overlay,
[class*="hero-"] {
    transition: none !important;
}

/* ===== LIGHT MODE OVERRIDES ===== */

/* Empresa homepage - ensure visibility (JS handles gradient changes) */
[data-theme="light"] .hero-empresa .intro-bg {
    opacity: 1 !important;
    display: block !important;
    /* when light mode is active there may be a dark gradient hardcoded via inline style,
       blend it so the underlying photo is still clearly visible */
    background-blend-mode: lighten !important;
    filter: brightness(1.05) contrast(1.02) !important;
}

/* Create subtle overlay on empresa hero in light mode */
[data-theme="light"] .hero-empresa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.3) 100%);
    z-index: 5;
    pointer-events: none;
}

/* Certificados - white gradient */
[data-theme="light"] .main-esin-certificados .intro-bg {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.6) 100%) !important;
}

/* Empresa hero - white gradient overlay in light mode matching other heroes */
[data-theme="light"] .hero-empresa .hero-bg-overlay {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.6) 60%, transparent 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: 1 !important;
    display: block !important;
    background-blend-mode: lighten !important;
    filter: brightness(1.05) contrast(1.02) !important;
}

/* Mintra - white gradient */
[data-theme="light"] .hero-mintra .intro-bg {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.6) 100%) !important;
}

/* Ensure .hero-mintra, .capac-hero-refined, and .monitoreo-hero match structure and overlays used by other heroes */
.hero-mintra,
.capac-hero-refined,
.monitoreo-hero {
    position: relative;
    min-height: 500px;
    display: block;
}

.hero-mintra .container,
.capac-hero-refined .container,
.monitoreo-hero .container {
    position: relative;
    z-index: 10;
}

/* Match empresa hero overlay in light mode so visual style is consistent */
[data-theme="light"] .hero-mintra .hero-bg-overlay {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 20%, rgba(255, 255, 255, 0.6) 60%, transparent 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: 1 !important;
    display: block !important;
    background-blend-mode: lighten !important;
    filter: brightness(1.05) contrast(1.02) !important;
}

[data-theme="light"] .hero-mintra::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.3) 100%);
    z-index: 5;
    pointer-events: none;
}

/* Cursos/Aula Virtual - show background image cleanly in both modes */
[data-theme="light"] .aula-hero .hero-bg-overlay {
    opacity: 1 !important;
    display: block !important;
    background-blend-mode: normal !important;
    filter: none !important;
}

/* Capacitaciones, Monitoreos & MINTRA heroes should behave identical to other heroes */
.capac-hero-refined .hero-bg-image,
.monitoreo-hero .hero-bg-img,
.hero-mintra .hero-bg-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}

/* light mode overlay and blend for custom heroes */
[data-theme="light"] .capac-hero-refined .hero-bg-image,
[data-theme="light"] .monitoreo-hero .hero-bg-img,
[data-theme="light"] .hero-mintra .hero-bg-img {
    background-blend-mode: lighten !important;
    filter: brightness(1.05) contrast(1.02) !important;
}

[data-theme="light"] .capac-hero-refined::before,
[data-theme="light"] .monitoreo-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 100%);
    z-index: 5;
    pointer-events: none;
}

/* Dark mode: ensure Aula Virtual hero shows image WITHOUT gradient overlay */
[data-theme="dark"] .aula-hero .hero-bg-overlay {
    opacity: 1 !important;
    display: block !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Create a white overlay using pseudo-element positioned inside parent - DISABLED FOR CLEAN IMAGE */
[data-theme="light"] .aula-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 5;
    pointer-events: none;
}

/* Industrial/Cursos - white gradient */
[data-theme="light"] .hero-industrial-premium .intro-bg {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.6) 100%) !important;
}

/* Ensure dark mode shows images correctly */
[data-theme="dark"] .hero-bg-overlay {
    opacity: 1 !important;
    display: block !important;
}

/* Ensure overlay sits above the image but below content */
.hero-bg-overlay { z-index: 1; }
.intro-bg { z-index: 0; }
.hero-bg-img { z-index: 0; }

/* ===== FORCE VISIBILITY FOR ALL HERO BACKGROUNDS ===== */
.section-intro .intro-bg,
.section-intro2 .intro-bg,
.hero-empresa .intro-bg,
.hero-industrial-premium .intro-bg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
[class*="hero-"] .hero-bg-img,
.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    display: block;
    opacity: 1 !important;
}
[data-theme="light"] .bg-overlay,
[data-theme="light"] .hero-overlay,
[data-theme="light"] .intro-overlay,
[data-theme="light"] .bg-overlay-1 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ===== DARK MODE CLEANUP ===== */
[data-theme="dark"] .intro-bg::before,
[data-theme="dark"] .intro-bg::after,
[data-theme="dark"] .hero-bg-overlay::before,
[data-theme="dark"] .hero-bg-overlay::after {
    display: none !important;
}

/* ===== CLEAN CARD APPEARANCE FOR LIGHT MODE ===== */
/* Remove blue underlines and enforce readable link color inside floating/cards */
.floating-card-mintra a,
.floating-card-mintra a:visited,
.benefit-card-new a,
.benefit-card-mintra a,
.benefits-grid-new a {
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit !important;
}

/* Defensive: links inside card-content keep readable color in light theme */
[data-theme="light"] .floating-card-mintra a,
[data-theme="light"] .benefit-card-new a,
[data-theme="light"] .benefit-card-mintra a {
    color: #004080 !important;
    text-decoration: none !important;
}

/* ===== IMAGES: make image cards consistent between light/dark modes ===== */
/* Force card images to a fixed height and cover crop so sizes match across themes */
.benefits-grid-new img,
.benefit-card-new img,
.benefit-card-mintra img,
.card-img,
.service-card img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

@media (max-width: 992px) {
    .benefits-grid-new img,
    .benefit-card-new img,
    .benefit-card-mintra img,
    .card-img,
    .service-card img {
        height: 180px !important;
    }
}