/*
Theme Name: RCMA Classic
Author: ESBWS - Lochlan Kennedy
Author URI: https://esbws.com
Description: Custom Classic Theme for Red Croc Martial Arts
Version: 1.6
*/

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed: 80px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow-y: auto; /* allow page scrolling */
    min-height: 100vh;
    min-width: 100vw;
    overflow-x:hidden;
}

.site-wrapper {
    display: flex;
    flex-direction: row;     /* sidebar + main-area in a row */
    min-height: 100vh;       /* fill the viewport height */
    width: 100%;             /* ensure it spans full width */
    align-items: stretch;    /* stretch children to fill vertically */
    max-width: 100vw;
}

/* ======================
   Containment Blocks
====================== */

.main-area {

    min-height: 0;
    min-width: 0;
    display: flex;
    flex: auto;
    flex-direction: column;
    /*  overflow: hidden;         content-area will scroll instead */
}

.content-area {
    
    /* overflow-y: auto;          page content scrolls normally */
    display: flex;
    flex: auto;
    flex-direction: column;
    align-items: center;
    background: #f0f0f0;
    padding: 40px 0 0 0;
    box-shadow: 
        inset 6px 0 12px -6px rgba(0,0,0,0.25),
        inset 0 -6px 12px -6px rgba(0,0,0,0.20);
    min-height:0;
    min-width: 0;
    
}

/* Post Content */
.page-section {
    width: 86%;
    max-width: 1100px;
    margin:40px auto;
    padding: 10px 30px;
}

.page-card {
    width: 86%;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 60px;
    margin-right: 60px; 
    background: #fff;
    padding-left: 30px;
    padding-right: 15px;
    padding-bottom: 40px;
    padding-top: 30px;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transform: translateZ(0);
}

@media (max-width:800px){

    .page-card,
    .page-section{
        width:86%;
        margin:25px auto;
        padding: 20px;        /* uniform padding */
    }

}

/* ======================
   SIDEBAR
====================== */
.sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    background: #c00000;
    color: #fff;
    position:sticky;
    
    top: calc(-1 * (100vh - 100%));
    height:100vh;
    overflow-y: auto;    
    transition: width 0.3s ease;
    /* texture & shadow */
    background-image:
        linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 4px);
    box-shadow: inset -8px 0 20px rgba(0,0,0,0.15);
    
}

/* Sidebar content */
/*148px is the top to be inline with the red stripe from the header */
.sidebar-content {
    padding: 30px 0px 30px 0px;  /* top 80px for hamburger, bottom 30px, no left/right padding */
    /*flex: 1 1 auto;*/
    /*overflow-y: auto;*/
    
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 15px;
}

.sidebar a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    
}

.sidebar a:hover {
    color: #c00000;
}
/* UL takes full width */
.sidebar-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Sidebar Logo */
.sidebar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 10px 0;
    transition: opacity 0.2s ease;  /* fade in/out with sidebar */
    
}

/* Logo image */
.sidebar-logo img {
    max-width: 80%;
    height: auto;
    display: block;
}

/* List items: spacing between items */
.sidebar-content li {
    margin-bottom: 0px;
}

/* Links fill entire width */
.sidebar-content li a {
    display: block;
    width: 100%;             /* now fills entire sidebar width */
    box-sizing: border-box;
    padding: 10px 16px;      /* inner padding for text */
    background: #f5f5f5;
    color: #c00000;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease;
    /* border-bottom: 2px solid #c00000; */
    
    border-radius: 0px;        /* no rounding */
    /* Subtle right shadow */
    box-shadow: 2px 0 6px rgba(0,0,0,0.08);
}

/* Hover effect */
.sidebar-content li a:hover {
    transform: scale(1.03);
    box-shadow: 2px 0 8px rgba(0,0,0,0.12); /* slightly stronger on hover */
}


/* ======================
   HAMBURGER BUTTON
====================== */

.menu-toggle {
    position: absolute;
    top: 30px;
    left: 12px;
    width: 36px;
    height: 30px;
    display: none;
    flex-direction: column;
    justify-content:flex-start;
    cursor: pointer;
    background: #c00000;
    border: none;
    padding: 5px;
    z-index: 10;
}

.menu-toggle span {
    display:block;
    width:100%;
    height: 4px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animate to X */
body.sidebar-open .menu-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

body.sidebar-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

body.sidebar-open .menu-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ======================
   Registration Form
====================== */
.rcma-form{
    display:flex;
    flex-direction:column;
    gap:20px;
    background:#fff;
    padding:35px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.rcma-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
}

.rcma-field label{
    font-weight:600;
    font-size:14px;
    color:#333;
}

.rcma-field input,
.rcma-field select,
.rcma-field textarea{
    padding:16px;
    width:100%;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:16px;
}

.rcma-field input[type="date"]{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    max-width:100%;
}

.rcma-field textarea{
    min-height:120px;
    resize:vertical;
}

.rcma-checkbox{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:14px;
}

.rcma-submit{
    background:#c00000;
    color:#fff;
    padding:16px 22px;
    border:none;
    border-radius:6px;
    font-weight:700;
    font-size:16px;
    cursor:pointer;
    transition:all 0.2s ease;
    width:100%;
    margin-top:10px;
}

.rcma-submit:hover{
    background:#a80000;
}

.rcma-submit:active{
    transform:scale(0.98);
}

.rcma-submit:disabled{
    background:#999;
    cursor:not-allowed;
    opacity:0.7;
}

@media (max-width:600px){

    .rcma-form{
        padding:25px;
    }

    .rcma-field input,
    .rcma-field select,
    .rcma-field textarea{
        font-size:16px;
    }

}





/* ======================
   HEADER STRIP
====================== */
/* Header Strip - matching sidebar texture, more pronounced, no stitching */
.header-strip {
    position: sticky;
    top: 0;
    z-index: 50;

    color: #c00000;
    padding: 20px 30px;

    /* Base light color for header */
    background: #f5f5f5;

    /* Frosted / woven texture similar to sidebar, stronger lines */
    background-image:
        linear-gradient(
            rgba(0,0,0,0.06),  /* stronger line */
            rgba(255,255,255,0.03)
        ),
        repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0.06) 0px,  /* stronger diagonal line */
            rgba(0,0,0,0.06) 1px,
            transparent 1px,
            transparent 4px
        );

    /* Card effect */
    border-bottom: 4px solid #c00000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Header inner: horizontal, responsive */
.header-inner {
    display: flex;
    flex-direction: row;            /* horizontal layout */
    justify-content: space-between; /* spread across full width */
    align-items: center;            /* vertical centering */
    width: 100%;
    gap: 20px;                      /* space between elements */
    flex-wrap: wrap;                /* wrap on very small screens */
}

.header-text-primary {
    font-size: 28px;
    font-weight: bold;
}

.header-text-primary a{
    color: #c00000;
    text-decoration: none;
}

.header-text-primary a:hover{
    color: #1c1c1c;
    text-decoration: none;
}

.header-text-primary a:after{
    color: #c00000;
    text-decoration: none;
}

.header-text-secondary {
    font-size: 16px;
    color: #c00000;
}

.header-text-secondary a{
    color: #c00000;
    text-decoration: none;
}

.header-text-secondary a:hover{
    color: #1c1c1c;
    text-decoration: none;
}

.header-text-secondary a:after{
    color: #c00000;
    text-decoration: none;
}

.header-logo img {
    height: 100px;       /* adjust as needed */
    width: auto;
}


/* ======================
   FOOTER
====================== */

.site-footer {
    background-color: #1c1c1c; /* charcoal base */
    min-width: 0;
    min-height: 0;
    /* Frosted / woven texture similar to sidebar/header */
    background-image:
        linear-gradient(
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.03)
        ),
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 4px
        );

    color: #ffffff;
    padding: 25px 30px;

    border-top: 4px solid #c00000; /* tie in with header strip */
    box-shadow: inset 4px 0 12px rgba(0,0,0,0.12); /* subtle inner depth */
}

.footer-inner {
    text-align: center;
    font-size: 14px;
    opacity: 0.85;
}

.footer-inner a{
    color: #c00000;
    text-decoration: none;
}

.footer-inner a:hover{
    color: #fff;
}

.footer-inner a:active{
    color: #9e0000;
}

.footer-social {
    margin-top: 10px;
}

.footer-social a {
    display: inline-block;
    margin: 0 10px;
    font-size: 18px; /* icon size */
    transition: color 0.3s;
}

.footer-social a:hover {
    color: #fff; /* Red Croc accent color */
}

/* ======================
   News Page Cards
===================== */
.news-grid {
    width:90%;
    display: flex;
    flex-direction: column;   /* vertical cards */
    gap: 25px;
    flex: 0 0 auto;           /* important: do not grow */
    min-width: 0;
    min-height: 0;
    justify-content: flex-start;
    margin:20px;
}

.news-title-wrapper {
    width: 90%;
    padding-left: 30px;   /* space from sidebar */
    box-sizing: border-box;
    margin-bottom: 30px;
}

.news-page-title {
    font-size: 32px;
    font-weight: bold;
    color: #1c1c1c;
    margin: 0;
}

.news-cards {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 25px;
}

.news-card {
    display: flex;
    flex: 0 0 auto;           /* prevent cards from stretching parent */
    flex-direction: row;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 10px;
    margin-bottom: 20px;
    align-items: flex-start; /* don't stretch */
}

/* .news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
} */

.news-card-image {
    flex: 0 0 150px;
    margin-right: 10px;
    overflow: hidden;
}

.news-card-image img {
    padding: 4px;
    width: 100%;
    height: auto;  /* changed from 100% to auto */
    object-fit: cover;
    display: block;
}

.news-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* don't force spacing */
}

.news-card-title {
    font-size: 22px;
    margin: 0 0 10px 0;
    color: #c00000;
}

.news-card-title a {
    text-decoration: none;
    color: inherit;
}

.news-card-title a:hover {
    text-decoration: underline;
}

.news-card-excerpt {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    min-height: 0; /* prevent extra spacing */
}

.news-card-readmore {
    align-self: flex-start; /* optional: keeps button near content */
    text-decoration: none;
    color: #fff;
    background-color: #c00000;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: regular;
    transition: background-color 0.2s ease;
}

.news-card-readmore:hover {
    background-color: #a30000;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* ======================
   Instructors Page Grid
====================== */
.instructors-page-title {
    font-size: 32px;
    font-weight: bold;
    color: #1c1c1c;
    margin-bottom: 30px;
}

.instructors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    margin:20px;
}

/* Individual Instructor Card */
.instructor-card {
    display: flex;
    flex-direction: column; /* vertical stacking */
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* .instructor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
} */

/* Image fixed size, no cropping */
.instructor-card-image {
    width: 100%;
    height: 220px; /* fixed height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0; /* fallback */
}
.instructor-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;       /* ensure full image fits without cropping */
    display: block;
}
/* .instructor-card-image img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
} */

/* Content */
/* .instructor-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
} */
 .instructor-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto; /* allow card content to grow */
}

.instructor-card-name {
    font-size: 20px;
    font-weight: bold;
    color: #c00000;
    margin: 0;
}

.instructor-card-belt {
    font-size: 16px;
    color: #333;
    margin: 0;
}

.instructor-card-learnmore {
    margin-top: auto; /* pushes button to bottom */
    text-decoration: none;
    color: #fff;
    background-color: #c00000;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease;
}

.instructor-card-learnmore:hover {
    background-color: #a30000;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* ======================
   Form Banners
====================== */
.rcma-badge {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-weight: 600;
}
.rcma-success {
    background: #d4edda;
    color: #155724;
}
.rcma-error {
    background: #f8d7da;
    color: #721c24;
}
.rcma-badge ul { margin:0; padding-left:20px; }

/* ======================
   TIMETABLE CARDS
====================== */

.program-section{
    width:86%;
    min-width: 0;
}

.program-location-title{
    display: flex;
    flex: auto;
    flex-direction: column;
    align-items: center;
    font-size: xx-large;
    color: #c00000;
    border-bottom: #c00000 solid 2px;
}

.program-grid {
    display: grid;
    justify-content: center;
    width:100%;
    grid-template-columns:repeat(auto-fit, minmax(280px, 400px));
    gap: 50px;
    margin-top: 40px;
    margin-bottom: 30px;
    
}

.program-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    height: 100%;
    max-width: 400px;
}

.program-card-image img {
    width: 100%;
    height: 260px;
    object-fit:inherit;
    display: block;
}

.program-card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.program-card-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.program-classes {
    /*
    margin-top: auto;
    white-space: pre-line;
    font-weight: 500;
    */
    margin-bottom: 20px;
}

.program-cta {
    margin-top: auto;
}

.program-button {
    display: inline-block;
    padding: 12px 18px;
    background: #c8102e;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.program-button:hover,
.program-button:focus {
    background: #a30d25;
}

/* ======================
   SESSION TYPE CARDS
====================== */

.session-types-section{
    width:86%;
    min-width: 0;
}

.session-location-title{
    display: flex;
    flex: auto;
    flex-direction: column;
    align-items: center;
    font-size: xx-large;
    color: #c00000;
    margin-right: 5px;
    border-bottom: #c00000 solid 2px;
}

.session-grid {
    display: grid;
    justify-content: center;
    width:100%;
    grid-template-columns:repeat(auto-fit, minmax(280px, 400px));
    gap: 50px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.session-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    height: 100%;
    max-width: 400px;
}

.session-card-image img {
    width: 100%;
    height: 240px;
    object-fit: inherit;
    display: block;
}

.session-card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.session-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.session-title a {
    text-decoration: none;
    color: inherit;
}

.session-excerpt {
    margin-bottom: 20px;
}

.session-cta {
    margin-top: auto;
}

.session-button {
    display: inline-block;
    padding: 12px 18px;
    background: #c8102e;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.session-button:hover,
.session-button:focus {
    background: #a30d25;
}

/* ======================
   Map Embed
====================== */
.location-card {
    width: 100%;                   /* slightly narrower than full width */
    max-width: 500px;
    margin: auto auto 50px auto; /* left-aligned visually */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    
    
}

.location-card h2{
    margin: 0;
    padding: 15px 20px;
    font-size: 1.5rem;
    font-weight: 600;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color:#c00000;
}

#osm-map {
    width: 100%;
    height: 300px;
}

#osm-map1 {
    width: 100%;
    height: 300px;
}

.location-card-footer {
    padding: 15px 20px;
    text-align: left;             /* left-align the button */
    background: #fff;
}

.location-button {
    display: inline-block;
    padding: 10px 18px;
    background: #c8102e;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.location-button:hover,
.location-button:focus {
    background: #a30d25;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    #osm-map {
        height: 250px;
    }
    #osm-map1 {
        height: 250px;
    }
}

@media screen and (max-width: 480px) {
    #osm-map {
        height: 200px;
    }
    #osm-map1 {
        height: 200px;
    }

    .location-card {
        width: 100%;
        margin: 20px auto;           /* left-align on small screens */
        max-width: none;
    }
    
}


/* ======================
   WordPress Pagination
====================== */
.wp-pagenavi,
.nav-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.nav-links a,
.nav-links span {
    display: inline-block;
    padding: 8px 16px;
    background-color: #c00000;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-links a:hover {
    background-color: #a30000;
    transform: translateY(-2px);
}

.nav-links .current {
    background-color: #f5f5f5; /* match button theme or leave as is */
    color: #c00000;
    border-radius: 4px;
    border: 2px solid #c00000; /* border-style + width + color */
    font-weight: bold;
    padding: 8px 16px;
    cursor: default;
}

.nav-links .prev,
.nav-links .next {
    font-weight: bold;
}

/* Optional: smaller screens */
@media (max-width: 768px) {
    .nav-links a,
    .nav-links span {
        padding: 6px 12px;
    }
}



/* ======================
   MOBILE BEHAVIOUR
====================== */
@media (max-width: 1024px) {

    .program-section{
        width:80%;
        min-width: 0;
    }
    .session-types-section{
        width:80%;
        min-width: 0;
    }

    /* Sidebar on mobile: always has texture */
    .sidebar {
        flex: 0 0 auto;
        width: 0;  /* collapsed width */
        height: auto;
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 1000;

        /* Base red with frosted/weave texture */
        background: #c00000;
        background-image:
            linear-gradient(
                rgba(255,255,255,0.08),
                rgba(255,255,255,0.03)
            ),
            repeating-linear-gradient(
                45deg,
                rgba(255,255,255,0.03) 0px,
                rgba(255,255,255,0.03) 1px,
                transparent 1px,
                transparent 4px
            );
        box-shadow: inset -8px 0 20px rgba(0,0,0,0.15);
        transition: width 0.3s ease;
    }

    /* Expanded sidebar: overlay covering full screen */
    body.sidebar-open .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1100;
    }

    .sidebar-content {
        overflow: visible; /* prevent independent scrolling */
        flex: none;        /* do not flex-grow to fill height */
    }

    /* Sidebar content and logo fade in/out */
    .sidebar-content, .sidebar-logo {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.sidebar-open .sidebar-content,
    body.sidebar-open .sidebar-logo {
        opacity: 1;
        pointer-events: auto;
    }

    /* Header Strip content */
    .header-inner {
        display: flex;
        flex-direction: row;            /* horizontal layout */
        justify-content: space-between; /* spread across full width */
        align-items: center;            /* vertical centering */
        width: 80%;
        gap: 10px;                      /* space between elements */
        flex-wrap: wrap;                /* wrap on very small screens */
        padding-left: 60px;
        padding-right: 20px;
    }

    /* Hamburger button fixed top-left */
    .menu-toggle {
        display: flex;
        position: fixed;
        top: 30px;
        left: 30px;
        background: #c00000;
        color: #fff;
        width: 36px;
        height: 30px;
        padding: 5px;
        cursor: pointer;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1200;
    }

    .menu-toggle span {
        width: 100%;
        height: 4px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Animate hamburger to X */
    body.sidebar-open .menu-toggle span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    body.sidebar-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    body.sidebar-open .menu-toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* ======================
    News Page Cards
    ===================== */
    .news-page-title {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 30px;
        color: #1c1c1c;
    }

    .news-cards {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .news-card {
        display: flex;
        flex-direction: row;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        padding: 10px;
        margin-bottom: 20px;
    }

    .news-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

    .news-card-image {
        flex: 0 0 150px;
        margin-right: 10px;
        overflow: hidden;
    }

    .news-card-image img {
        padding: 4px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .news-card-content {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .news-card-title {
        font-size: 22px;
        margin: 0 0 10px 0;
        color: #c00000;
    }

    .news-card-title a {
        text-decoration: none;
        color: inherit;
    }

    .news-card-title a:hover {
        text-decoration: underline;
    }

    .news-card-excerpt {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }

    .news-card-readmore {
        align-self: flex-end;
        text-decoration: none;
        color: #fff;
        background-color: #c00000;
        padding: 6px 12px;
        border-radius: 4px;
        font-weight: regular;
        transition: background-color 0.2s ease;
    }

    .news-card-readmore:hover {
        background-color: #a30000;
    }

    /* INSTRUCTORS */
    .instructors-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .instructor-card-image {
        height: 180px;
    }

    .instructor-card-name {
        font-size: 18px;
    }

    .instructor-card-belt {
        font-size: 14px;
    }

}

@media (max-width: 768px) {
    .header-inner {
        gap: 10px;
    }

    .header-text-primary {
        font-size: 20px;
    }

    .header-text-secondary {
        font-size: 14px;
    }

    .header-logo img {
        height: 60px;
    }

    .news-card {
        flex-direction: column;
    }

    .news-card-image {
        width: 100%;
        height: 180px;
    }

    .instructor-card {
        width: 100%; /* single column */
    }
}