/**
 * Meriturva Course Complete UI - Industrial Design System
 * 
 * Visuaalinen konsepti:
 * - Teollinen, realistinen, ammatillinen
 * - Neutraalit värit (valkoinen, harmaa, musta)
 * - Tehosteet kuvista, ei UI-elementeistä
 * - Tekninen typografia
 * 
 * @package Meriturva
 * @author DigiSilta Oy
 * @version 1.2.4 (Global pink killer)
 */

/* =========================================
   0. Global Resets & Overrides (KILL PINK)
   ========================================= */
/* Ylikirjoitetaan Hello Elementorin reset.css:n pinkki väri (#c36) */
a {
    color: #333; /* Oletuslinkin väri */
}

a:hover {
    color: #000;
}

/* 
   KOHDISTETTU KORJAUS PINKILLE VÄRILLE 
   Sen sijaan että pakotetaan kaikki napit mustiksi (joka rikkoo editorin),
   kohdistetaan musta väri vain teeman omiin ja yleisimpiin Elementor-nappeihin.
*/

/* 1. Elementor-napit (frontend) */
/* POISTETTU GLOBAALI ELEMENTOR-NAPPIEN YLIKIRJOITUS */
/* .elementor-button { ... } */

/* 2. Lomakenapit (Input submit/button) */
/* Varmistetaan että nämä eivät vaikuta editoriin */
.elementor-widget-container input[type="submit"], 
.elementor-widget-container input[type="button"], 
.elementor-widget-container input[type="reset"] {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    border-radius: 0;
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 24px;
    cursor: pointer;
}

.elementor-widget-container input[type="submit"]:hover, 
.elementor-widget-container input[type="button"]:hover, 
.elementor-widget-container input[type="reset"]:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* 3. Meriturvan omat napit varmistetaan */
.meriturva-btn {
    background-color: #000 !important;
    border: 1px solid #000 !important;
    color: #fff !important;
}

.meriturva-btn:hover {
    background-color: #333 !important;
    border-color: #333 !important;
}

/* Palautetaan tabit */
.meriturva-nav-tabs__button {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #666 !important;
    padding: 10px 15px 15px 15px !important;
    width: auto !important; /* Estä 100% leveys, jos periytyy */
    text-align: center !important; /* Keskitys */
}

.meriturva-nav-tabs__button:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #418B8D !important; /* Teal */
}

.meriturva-nav-tabs__button.active {
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom-color: #000 !important;
    color: #000 !important;
}

/* =========================================
   1. Layout & Grid
   ========================================= */
.meriturva-course-ui {
    display: grid;
    grid-template-columns: 1fr 380px; /* Hieman leveämpi sivupalkki */
    gap: 60px; /* Lisää ilmavuutta */
    margin: 20px 0 60px 0;
    font-family: 'Inter', sans-serif; /* Leipäteksti: Inter */
    color: #111; /* Puhdas tumma teksti */
    line-height: 1.6;
}

.meriturva-course-ui__main {
    min-width: 0;
}

.meriturva-course-ui__sidebar {
    position: relative;
}

/* Sticky Sidebar on Desktop */
@media (min-width: 1025px) {
    .meriturva-course-ui__sidebar-inner {
        position: sticky;
        top: 40px;
    }
}

/* Responsive Stack */
@media (max-width: 1024px) {
    .meriturva-course-ui {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 16px 0 40px 0;
    }
    
    .meriturva-course-ui__main {
        order: 1;
    }

    .meriturva-course-ui__sidebar {
        order: 2;
    }
}

/* =========================================
   2. Components: Cards (Technical Plates)
   ========================================= */
.meriturva-course-card {
    background: #fff;
    border: 1px solid #e0e0e0; /* Neutraali harmaa */
    border-radius: 0; /* Ei pyöristyksiä - tekninen ilme */
    margin-bottom: 30px;
    box-shadow: none; /* Ei varjostuksia - "flat" realistinen */
}

.meriturva-course-card--secondary {
    background: #f9f9f9; /* Hyvin vaalea harmaa */
    border: 1px solid #eee;
}

.meriturva-course-card--plain {
    background: transparent;
    border: none;
    padding: 0;
}

/* Tulevat avoimet kurssit - haalea keltainen tausta, tiivistetty padding/margin */
.meriturva-course-ui__upcoming {
    background: #e8f4c4;
    border-color: #d0e0a8;
    margin-bottom: 1rem;
}

.meriturva-course-ui__upcoming .meriturva-course-card__header {
    background: #e8f4c4;
    padding: 12px 18px 10px 18px;
}

.meriturva-course-ui__upcoming .meriturva-course-card__body {
    background: #e8f4c4;
    padding: 12px 18px 16px 18px;
}

#tulevat-kurssit > .meriturva-course-card__body {
    padding: 15px;
}

.meriturva-course-ui__show-more-wrap {
    margin-top: 12px;
    padding-top: 4px;
}

.meriturva-course-ui__show-more {
    cursor: pointer;
}

/* Tulevat avoimet -lohkossa: nappi musta, reunaväri musta (ei sininen) */
.meriturva-course-ui__upcoming .meriturva-course-ui__show-more.meriturva-btn--outline {
    background-color: #000;
    border-color: #000;
    color: #fff !important;
}
.meriturva-course-ui__upcoming .meriturva-course-ui__show-more.meriturva-btn--outline:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff !important;
}

/* Kielitieto pääsisällössä */
.meriturva-course-ui__language-info {
    margin-bottom: 1.5em;
}

/* Pitkä sisältö: collapse + fade, "Lue lisää" (moduulinäkymä) – avoimet kurssit ylemmäs */
.meriturva-course-ui__content--collapsible .meriturva-course-ui__content-inner {
    max-height: 420px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
    padding-bottom: 0.5rem;
}
.meriturva-course-ui__content--collapsible.is-expanded .meriturva-course-ui__content-inner {
    max-height: 9999px;
}
.meriturva-course-ui__content-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 40%, transparent 100%);
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.meriturva-course-ui__content--collapsible.is-expanded .meriturva-course-ui__content-fade {
    opacity: 0;
    visibility: hidden;
}
.meriturva-course-ui__content-toggle {
    margin-top: 1rem;
    cursor: pointer;
}

/* Infolaatikko (Kurssipaikat, Hinta, Majoitus) Tulevat kurssit -laatikon alla */
.meriturva-course-ui__info-box .meriturva-course-card__body {
    padding: 20px 30px;
}

.meriturva-course-ui__info-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.meriturva-course-ui__info-list dt {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.75em;
    margin-bottom: 0.25em;
}

.meriturva-course-ui__info-list dt:first-child {
    margin-top: 0;
}

.meriturva-course-ui__info-list dd {
    margin: 0 0 0 0;
    padding: 0;
    font-size: 0.95rem;
}

.meriturva-course-ui__info-list dd a {
    color: inherit;
    text-decoration: underline;
}

/* Kurssipaikat sidebar - listaus (legacy, jos käytössä muualla) */
.meriturva-course-ui__locations-list--sidebar {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.meriturva-course-ui__locations-list--sidebar li {
    padding: 0.35rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.meriturva-course-ui__locations-list--sidebar li:last-child {
    border-bottom: none;
}

.meriturva-course-ui__location-cta {
    margin-top: 1rem;
}

.meriturva-course-card__header {
    background: #fff; /* Ei erillistä taustaväriä otsikolle */
    padding: 25px 30px 15px 30px;
    border-bottom: 2px solid #111; /* Vahva kontrasti */
}

.meriturva-course-card__title {
    margin: 0;
    font-family: 'Barlow', sans-serif; /* Otsikot: Barlow */
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
}

.meriturva-course-card__subtitle {
    margin: 0 0 15px 0;
    font-family: 'Barlow', sans-serif; /* Otsikot: Barlow */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.meriturva-course-card__body {
    padding: 30px;
}

.meriturva-course-card__footer {
    padding: 0 30px 30px 30px;
    background: #fff;
    border: none;
}

/* =========================================
   3. Typography & Info Rows
   ========================================= */
.meriturva-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.meriturva-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.meriturva-info-row:first-child {
    padding-top: 0;
}

.meriturva-info-label {
    font-family: 'Barlow', sans-serif; /* Labelit: Barlow */
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #666; /* Neutraali harmaa */
    flex-shrink: 0;
    margin-right: 20px;
}

.meriturva-info-label i {
    color: #999;
    margin-right: 6px;
    font-size: 14px;
}

.meriturva-info-value {
    font-size: 16px;
    font-weight: 400; /* Normaali paino luettavuuden vuoksi */
    color: #000;
    text-align: right;
}

.meriturva-info-value--highlight {
    font-family: 'Barlow', sans-serif; /* Koodit: Barlow */
    background: #eee;
    padding: 2px 6px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.meriturva-info-value--large {
    font-family: 'Barlow', sans-serif; /* Hinta: Barlow */
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
}

.meriturva-link-small {
    font-size: 13px;
    color: #555;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.meriturva-link-small:hover {
    color: #000;
}

.meriturva-text-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

/* =========================================
   4. Buttons (Safety Equipment Colors)
   ========================================= */

/* AINOASTAAN Meriturvan omat napit */
.meriturva-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    font-size: 15px;
    background-color: #000;
    color: #fff !important;
    border: 1px solid #000;
}

.meriturva-btn:hover {
    background-color: #333;
    border-color: #333;
    color: #fff !important;
}

.meriturva-btn--outline {
    background-color: transparent;
    border: 2px solid #000;
    color: #fff !important;
    padding: 10px 20px;
    font-weight: 700;
}

.meriturva-btn--outline:hover {
    background-color: #000;
    color: #fff !important;
    border-color: #000;
}

.meriturva-btn--full {
    width: 100%;
    text-align: center;
}

.meriturva-btn--small {
    padding: 10px 20px;
    font-size: 12px;
}

/* Ilmoittaudu-nappi: Meriturva vihreä #418B8D */
a.meriturva-btn.meriturva-btn--enrollment {
    background-color: #418B8D !important;
    border-color: #418B8D !important;
}

a.meriturva-btn.meriturva-btn--enrollment:hover {
    background-color: #2b5e60 !important;
    border-color: #2b5e60 !important;
}

/* Meriturva Search Widget Button Fix */
.meriturva-training-search__button,
.meriturva-training-search__reset {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    background-color: #418B8D !important; /* Teal */
    color: #fff !important;
    border: 1px solid #418B8D !important;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block; /* Varmista, että näyttäytyy nappina */
}

.meriturva-training-search__button:hover,
.meriturva-training-search__reset:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* POISTETTU KAIKKI GLOBAALIT ELEMENTOR-YLIKIRJOITUKSET */
/* Ei enää .elementor-button tyylejä täällä */

/* =========================================
   5. Content Sections (Left Column)
   ========================================= */
.meriturva-course-ui__section {
    margin-bottom: 60px;
}

.meriturva-course-ui__heading {
    font-family: 'Barlow', sans-serif; /* Otsikot: Barlow */
    font-size: 26px;
    font-weight: 700; /* Vahva H2 */
    text-transform: none; /* Ei pakotettua uppercasea otsikoissa */
    color: #000;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #000; /* Musta viiva */
}

/* Typography for standard content – yhtenäiset fonttikoot, perusleipäteksti 1rem */
.meriturva-course-ui__content { font-size: 1rem; }
.meriturva-course-ui__content h2 { font-family: 'Barlow', sans-serif; font-size: 1.875rem; font-weight: 700; margin-top: 40px; margin-bottom: 20px; color: #000; }
.meriturva-course-ui__content h3 { font-family: 'Barlow', sans-serif; font-size: 1.5rem; font-weight: 600; margin-top: 30px; margin-bottom: 15px; color: #111; }
.meriturva-course-ui__content p,
.meriturva-course-ui__content li,
.meriturva-course-ui__content td { font-size: 1rem; }
.meriturva-course-ui__content p { line-height: 1.7; color: #222; margin-bottom: 1.5em; max-width: 75ch; }
.meriturva-course-ui__content ul { margin-bottom: 1.5em; padding-left: 20px; }
.meriturva-course-ui__content li { margin-bottom: 0.8em; color: #222; padding-left: 5px; }

/* =========================================
   6. Upcoming Courses Table (Functional List)
   ========================================= */
.meriturva-course-ui__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.meriturva-course-ui__table thead {
    border-bottom: 2px solid #000;
}

.meriturva-course-ui__table th {
    text-align: left;
    padding: 15px 20px;
    background: transparent;
    font-family: 'Barlow', sans-serif; /* Taulukko-otsikot: Barlow */
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    letter-spacing: 0.5px;
}

.meriturva-course-ui__table td {
    padding: 5px;
    border-bottom: 1px solid #e2e8f0;
    color: #222;
    vertical-align: middle;
}

/* Tulevat avoimet -taulukko: näkyvät reunat, yhtenäinen väri (d0e0a8 = lohkon reunaväri) */
.meriturva-course-ui__upcoming .meriturva-course-ui__table td {
    border-color: #d0e0a8;
    border-bottom: 1px solid #d0e0a8;
}
.meriturva-course-ui__upcoming .meriturva-course-ui__table tbody tr:last-child td {
    border-bottom: 1px solid #d0e0a8;
}

/* Moduulinäkymä: päivämääräsolu ilman vertical-align: middle */
.meriturva-course-ui__row-main .meriturva-course-ui__date {
    vertical-align: top;
}

/* Moduulinäkymä: poista viiva vain pvm-rivin ja moduulirivin välissä (row-main jota seuraa moduulit-row) */
.meriturva-course-ui__upcoming .meriturva-course-ui__table tr.meriturva-course-ui__row-main:has(+ tr.meriturva-course-ui__moduulit-row) td {
    border-bottom: none;
}
.meriturva-course-ui__moduulit-row td {
    border-top: none;
    border-bottom: 1px solid #e2e8f0;
    padding-top: 0;
    vertical-align: top;
}
.meriturva-course-ui__upcoming .meriturva-course-ui__table .meriturva-course-ui__moduulit-row td {
    border-bottom: 1px solid #d0e0a8;
}

.meriturva-course-ui__table tbody tr:last-child td {
    border-bottom: 1px solid #ddd;
}

/* Taulukon viimeisen rivin alareuna */
.meriturva-course-ui__table-responsive .meriturva-course-ui__table tbody tr:last-child td {
    border-bottom: 1px solid #ddd;
}

.meriturva-course-ui__date {
    font-family: 'Barlow', sans-serif; /* Päivämäärät: Barlow */
    font-weight: 600;
    font-size: 16px;
    color: #000;
}

.meriturva-course-ui__action {
    text-align: right;
}

.meriturva-course-ui__full-badge {
    display: inline-block;
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: #aa3e3e;
    padding: 2px 8px;
    border-radius: 2px;
    margin-right: 0.75rem;
    vertical-align: middle;
}

/* Ilmoittaudu-linkki: teksti + alaviiva, ei nappi */
.meriturva-course-ui__enrollment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #418B8D;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.meriturva-course-ui__enrollment-link:hover {
    color: #2b5e60;
}

.meriturva-course-ui__enrollment-link .meriturva-icon-external {
    flex-shrink: 0;
}

.meriturva-text-muted {
    font-family: 'Barlow', sans-serif;
    color: #777;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* GWO-tyyli: Seuraavat kaikille avoimet kurssit + moduulilista */
.meriturva-course-ui__upcoming-intro {
    font-size: 1rem;
}
.meriturva-course-ui__upcoming--with-modules .meriturva-course-ui__upcoming-intro {
    margin: 0 0 1em 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}
.meriturva-course-ui__upcoming-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.meriturva-course-ui__upcoming-item {
    margin-bottom: 1em;
}
.meriturva-course-ui__upcoming-item:last-child {
    margin-bottom: 0;
}
.meriturva-course-ui__upcoming-date {
    font-weight: 700;
    margin-right: 0.5em;
}
.meriturva-course-ui__enrollment-link--block {
    display: inline;
}
.meriturva-course-ui__upcoming--with-modules .meriturva-course-ui__moduulit,
.meriturva-course-ui__moduulit--table {
    margin: 0.35em 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95em;
    color: #444;
    text-align: left;
}
.meriturva-course-ui__upcoming--with-modules .meriturva-course-ui__moduuli {
    margin: 0.2em 0;
}
/* Moduulinäkymä: leveä taulukko */
.meriturva-course-ui__upcoming--wide .meriturva-course-card__body {
    max-width: none;
}
.meriturva-course-ui__upcoming--wide .meriturva-course-ui__table-responsive {
    overflow-x: auto;
}

/* Moduulisivu: "Seuraavat kaikille avoimet kurssit" vasemmalla pääsisältöalueella, leveänä */
.meriturva-course-ui__upcoming-in-main {
    width: 100%;
    max-width: none;
}
.meriturva-course-ui__upcoming-in-main .meriturva-course-card {
    width: 100%;
}

/* Finnpilot: kaksi taulukkoa (turvallisuus / kertaus) samassa kortissa */
.meriturva-course-ui__upcoming--finnpilot .meriturva-course-card__body {
    padding: 1.25rem 1.5rem;
}
/* Finnpilot-alaotsikot: sama tyyli kuin meriturva-course-card__title (Barlow, uppercase jne.) */
.meriturva-course-ui__upcoming-subtitle {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: inherit;
}
.meriturva-course-ui__upcoming--finnpilot .meriturva-course-card__title.meriturva-course-ui__upcoming-subtitle {
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
    margin: 0 0 10px 0;
}
.meriturva-course-ui__upcoming--finnpilot .meriturva-course-ui__upcoming-subtitle:not(:first-child) {
    margin-top: 1.25rem;
}
.meriturva-course-ui__upcoming-footnote {
    margin: 1rem 0 0 0;
    font-size: 1rem;
    color: #555;
}

/* Kiinteät ilmoittautumislinkit (verkkokurssit – aina auki) */
.meriturva-course-ui__fixed-enrollment-intro {
    margin: 0 0 1em 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
}
.meriturva-course-ui__fixed-enrollment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.meriturva-course-ui__fixed-enrollment-item {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #e5e5e5;
}
.meriturva-course-ui__fixed-enrollment-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.meriturva-course-ui__fixed-enrollment-title {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35em;
}
.meriturva-course-ui__fixed-enrollment-link {
    display: inline-block;
    margin-bottom: 0.35em;
}
.meriturva-course-ui__fixed-enrollment-stcw,
.meriturva-course-ui__fixed-enrollment-price {
    display: block;
    font-size: 0.95em;
    color: #555;
}

/* Moduulit / osallistujatyypit (taulukkorivi-tyyli ja GWO-listassa) */
.meriturva-course-ui__moduulit {
    list-style: none;
    margin: 0.5em 0 0 0;
    padding: 0;
    font-size: 0.9em;
}
.meriturva-course-ui__moduulit--table {
    margin: 0.5em 0 0 0;
    padding: 0;
    font-size: 0.9em;
    color: #444;
}
.meriturva-course-ui__moduulit--table .meriturva-course-ui__moduuli {
    margin: 0.2em 0;
}
.meriturva-course-ui__moduuli {
    margin: 0.25em 0;
}
.meriturva-course-ui__moduuli-link {
    color: #333;
    text-decoration: underline;
}
.meriturva-course-ui__moduuli-link:hover {
    color: #2b5e60;
}
.meriturva-course-ui__moduuli-name {
    color: #555;
}

/* =========================================
   7. Gallery Grid (Documentary Style)
   ========================================= */
.meriturva-course-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.meriturva-course-gallery-item {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #eee;
    position: relative;
}

/* Mustavalkoinen oletuksena, värit hoverissa (valinnainen dokumentaarinen efekti) */
/* .meriturva-course-gallery-item img { filter: grayscale(100%); } */
/* .meriturva-course-gallery-item:hover img { filter: grayscale(0%); } */

.meriturva-course-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* Hitaampi, rauhallisempi liike */
}

.meriturva-course-gallery-item:hover img {
    transform: scale(1.03); /* Hyvin pieni liike */
}

@media (max-width: 600px) {
    .meriturva-course-gallery-grid {
        grid-template-columns: 1fr; /* Mobiilissa kuvat täysleveinä */
        gap: 15px;
    }
    
    .meriturva-info-row {
        flex-direction: row; /* Pidetään rivissä myös mobiilissa jos mahtuu */
        align-items: center;
    }

    .meriturva-course-ui__table th {
        padding: 15px 10px;
    }
    .meriturva-course-ui__table td {
        padding: 5px;
    }
    
    .meriturva-btn--outline {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* =========================================
   8. Breadcrumbs
   ========================================= */
.meriturva-breadcrumbs {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    padding: 10px 0;
}

.meriturva-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.meriturva-breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

.meriturva-breadcrumbs a {
    color: #111;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.meriturva-breadcrumbs a:hover {
    color: #555;
    text-decoration: underline;
}

.meriturva-breadcrumbs .separator {
    margin: 0 8px;
    color: #ccc;
    font-size: 14px;
}

.meriturva-breadcrumbs .current {
    color: #666;
    font-weight: 400;
}

.meriturva-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0; /* Lisätty välikköä */
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.meriturva-accordion-header:hover {
    background-color: #f9f9f9;
}

.meriturva-accordion-title {
    margin: 0;
    font-family: 'Barlow', sans-serif;
    font-size: 1.5rem; /* 1.5rem otsikko */
    font-weight: 400; /* Normal font weight */
    color: #111;
}

.meriturva-accordion-icon {
    font-size: 1.2rem; /* Hieman isompi ikoni suhteessa otsikkoon */
    transition: transform 0.3s ease;
    color: #000;
}

/* Active state */
.meriturva-accordion-item.active .meriturva-accordion-icon {
    transform: rotate(180deg);
}

.meriturva-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.meriturva-accordion-item.active .meriturva-accordion-content {
    max-height: 800px; /* Kasvatettu max-height varalta */
}

.meriturva-accordion-inner {
    padding: 0 0 32px 0; /* Lisätty välikköä alareunaan */
    color: #444;
    font-family: 'Inter', sans-serif; /* Leipäteksti Inter */
    font-size: 1rem;
    line-height: 1.6;
}

/* =========================================
   9. Nav Popular (Menu Dropdown)
   ========================================= */
.meriturva-nav-popular {
    padding: 20px;
    background: #fff;
    min-width: 600px; /* Leveä dropdown */
}

.meriturva-nav-popular__title {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.meriturva-nav-popular__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 30px; /* Pystyväli 15px, vaakaväli 30px */
}

.meriturva-nav-popular__link {
    display: block;
    font-family: 'Barlow', sans-serif; /* Linkit Barlow */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.4;
    transition: color 0.2s;
}

.meriturva-nav-popular__link:hover {
    color: #000;
    text-decoration: underline;
}

/* =========================================
   10. Category Info (Archive Header)
   ========================================= */
.meriturva-category-info {
    margin-bottom: 40px;
    max-width: 900px;
}

.meriturva-category-info__title {
    font-family: 'Barlow', sans-serif;
    font-size: 3rem; /* Iso ja näyttävä, kuten kuvassa */
    line-height: 1.1;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.meriturva-category-info__description {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem; /* Hieman isompi leipäteksti */
    line-height: 1.6;
    color: #333;
    max-width: 800px;
}

.meriturva-category-info__description p {
    margin-bottom: 15px;
}

/* Mobiiliresponsiivisuus */
@media (max-width: 768px) {
    .meriturva-category-info__title {
        font-size: 2rem;
    }
}

/* =========================================
   11. Nav Tabs (Tab Navigation)
   ========================================= */
.meriturva-nav-tabs {
    background: transparent; /* Ei taustaväriä */
    min-width: 600px; /* Leveä dropdown */
    font-family: 'Barlow', sans-serif;
}

.meriturva-nav-tabs__header {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Ilmavuutta nappien väliin */
    border-bottom: 1px solid #e0e0e0; /* Ohut, neutraali viiva */
    margin-bottom: 30px;
    padding-bottom: 0;
}

.meriturva-nav-tabs__button {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666; /* Passiivinen teksti: tummanharmaa */
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent; /* Alaviiva indikaattorina */
    padding: 10px 15px 15px 15px; /* Lisätty sivuttaista paddingia */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    top: 1px; /* Asettaa viivan päällekkäin headerin borderin kanssa */
}

.meriturva-nav-tabs__button:hover {
    color: #418B8D !important; /* Meriturva teal - Pakotettu */
    /* Ei taustaväriä hoverissa, vain tekstin väri */
}

.meriturva-nav-tabs__button.active {
    color: #000 !important; /* Aktiivinen teksti: musta */
    font-weight: 700;
    border-bottom-color: #000; /* Musta aktiivinen viiva */
}

.meriturva-nav-tabs__content {
    position: relative;
    min-height: 200px;
}

.meriturva-nav-tabs__panel {
    display: none;
    animation: fadeIn 0.3s ease-out; /* Pehmeä sisääntulo */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.meriturva-nav-tabs__panel.active {
    display: block;
}

.meriturva-nav-tabs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 40px; /* Enemmän vaakaväliä sarakkeiden väliin */
}

.meriturva-nav-tabs__link {
    display: block;
    font-family: 'Barlow', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    color: #333; /* Tummanharmaa linkki */
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.5;
    transition: color 0.2s;
    padding: 6px 0; /* Klikkausaluetta */
}

.meriturva-nav-tabs__link:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.meriturva-nav-tabs__empty {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #666;
    padding: 20px 0;
}

.meriturva-nav-tabs__footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* Suosituimmat-vain -layout: otsikko + Kaikki koulutukset -nappi */
.meriturva-nav-tabs--suosituimmat-only .meriturva-nav-tabs__header--single {
    border-bottom: 2px solid #111;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.meriturva-nav-tabs__label {
    font-family: 'Barlow', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
}

.meriturva-nav-tabs--suosituimmat-only .meriturva-nav-tabs__footer .meriturva-btn {
    font-size: 1.125rem;
    padding: 12px 24px;
}

/* Mobiiliresponsiivisuus */
@media (max-width: 768px) {
    .meriturva-nav-tabs {
        min-width: 100%;
    }
    
    .meriturva-nav-tabs__header {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
        margin-bottom: 20px;
    }
    
    .meriturva-nav-tabs__button {
        border-bottom: 1px solid #eee;
        border-left: 4px solid transparent; /* Vasen indikaattori mobiilissa */
        padding: 15px 10px;
        width: 100%;
        text-align: left;
        top: 0;
    }
    
    .meriturva-nav-tabs__button.active {
        border-bottom-color: #eee;
        border-left-color: #000; /* Musta palkki vasemmalla */
        background-color: #f9f9f9; /* Kevyt tausta aktiiviselle mobiilissa */
    }
    
    .meriturva-nav-tabs__grid {
        grid-template-columns: 1fr; /* Yksi sarake mobiilissa */
        gap: 10px;
    }
    
    .meriturva-nav-tabs__link {
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }
}

/* =========================================
   9. Category Grid (Shortcode)
   ========================================= */
.meriturva-category-grid__title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.meriturva-category-grid {
    display: grid;
    grid-gap: 30px;
    min-width: 0;
    width: 100%;
}

/* Estä korttien kuvien paisuminen grid-solussa */
.meriturva-category-grid > * {
    min-width: 0;
}

.meriturva-category-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.meriturva-category-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.meriturva-category-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .meriturva-category-grid--cols-3,
    .meriturva-category-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .meriturva-category-grid--cols-2,
    .meriturva-category-grid--cols-3,
    .meriturva-category-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

.meriturva-category-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #eee;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.meriturva-category-card:hover {
    border-color: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* 16:9 – aspect-ratio määrittää korkeuden, kuva normaalissa flow'ssa */
.meriturva-category-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f5f5f5;
    overflow: hidden;
    flex-shrink: 0;
}

.meriturva-category-card__image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
    display: block;
    vertical-align: middle;
}

.meriturva-category-card:hover .meriturva-category-card__image {
    transform: scale(1.05);
}

.meriturva-category-card__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meriturva-category-card__placeholder::before {
    content: '\f03e'; /* FontAwesome image icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 32px;
    color: #ccc;
}

.meriturva-category-card__badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 10;
}

.meriturva-category-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.meriturva-category-card__title {
    font-family: 'Barlow', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.meriturva-category-card__icon {
    font-size: 16px;
    color: #000;
    transition: transform 0.3s ease;
}

.meriturva-category-card:hover .meriturva-category-card__icon {
    transform: translateX(5px);
}

.meriturva-category-card__excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 0;
}

/* =========================================
   Tulostus: Tulevat kurssit + GWO-moduulit
   ========================================= */
@media print {
    .meriturva-course-card.meriturva-course-ui__upcoming {
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    .meriturva-course-ui__upcoming .meriturva-course-card__body {
        padding: 12px 16px;
    }
    .meriturva-course-ui__table {
        font-size: 1rem;
    }
    .meriturva-course-ui__table td {
        padding: 8px 10px;
        vertical-align: top;
    }
    .meriturva-course-ui__date {
        font-size: 1rem;
        white-space: nowrap;
    }
    /* Yksi rivi (päivä + moduulit) pysyy yhdessä tulostettaessa */
    .meriturva-course-ui__upcoming .meriturva-course-ui__table tbody tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Moduulilista: luettava fonttikoko, väliä rivien välissä */
    .meriturva-course-ui__moduulit,
    .meriturva-course-ui__moduulit--table {
        font-size: 1rem;
        margin-top: 0.5em;
        padding-left: 0;
    }
    .meriturva-course-ui__moduulit--table .meriturva-course-ui__moduuli,
    .meriturva-course-ui__moduuli {
        margin: 0.4em 0;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .meriturva-course-ui__moduuli-name {
        color: #222;
    }
    /* Linkit tulostuksessa: musta teksti, URL ei pakollinen */
    .meriturva-course-ui__enrollment-link {
        color: #000;
    }
    .meriturva-course-ui__enrollment-link .meriturva-icon-external {
        display: none;
    }
    .meriturva-course-ui__upcoming-footnote {
        font-size: 1rem;
        margin-top: 1em;
    }
    .meriturva-course-ui__upcoming--finnpilot .meriturva-course-card__title.meriturva-course-ui__upcoming-subtitle {
        margin-bottom: 8px;
    }
}

/* Elementor-button padding -override siirretty style.css:ään (MERITURVA 2026-05-11) */

/* Mobiili: Elementor button -widgetin meriturva-btn täysleveäksi (mm. mobile header) */
@media (max-width: 767px) {
    .elementor-widget-button .elementor-widget-container,
    .elementor-widget-button .elementor-button-wrapper {
        width: 100% !important;
    }
    .elementor-widget-button .meriturva-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}