/* ==================================================
   HOMEPAGE SECTIONS CSS
   Academia Buenos Aires
   Version: 17 – 2026-06-23 (accordion: the open item's header was painted dark
   by the theme's button:focus rule (unreadable dark-on-dark title). Override
   focus/active to stay light and give the selected item a subtle light tint.)
   Version: 16 – 2026-06-23 ("What makes us special" is an accordion again
   (first item open), restyled to FIGMA: borderless list with thin separators,
   grey icons inside a light circle, bold titles, chevron that rotates. Reverts
   the static-list styling. Pairs with home.js + page-home.php accordion markup.)
   Version: 15 – 2026-06-23 (desktop hero per FIGMA: text + buttons left-aligned
   (override the design-system's centred .hero-content), lower height
   (min-height 600→420 + override the 80px inset), lighter left-fade overlay so
   the photo stays clear, and the stray mobile <img> is hidden with !important.)
   Version: 14 – 2026-06-23 (mobile hero secondary CTA "Test my Spanish" was
   white-on-white after removing the blue band — now brand-blue border + text
   on a white button, blue fill on hover.)
   Version: 13 – 2026-06-23 (mobile hero now matches FIGMA: image full-width &
   rounded at the very top, NO blue band, dark centred heading + grey subheading
   below. Overrides the design-system .hero-section padding:80px / blue gradient /
   white text that were boxing-in and colouring the hero. Needs page-home.php V7.)
   Version: 12 – 2026-06-23 (mobile hero restructured: the image is now a real
   <img class="hero-mobile-image"> stacked on top and the heading flows BELOW it
   on the brand band (no more overlap), replacing the contain-background +
   flex-end approach; needs page-home.php V7. Also: desktop hero CTA buttons
   centred (.hero-ctas justify-content:center).)
   Version: 11 – 2026-06-22 (dropped the hero !important — root cause fixed in
   academia-design-system.css, whose .hero-section gradient shorthand was
   resetting background-size; deploy BOTH files together)
   Version: 10 – 2026-06-22 (hero background props forced with !important — an
   external stylesheet was resetting them via a shorthand to initial values, so
   background-size computed to "auto" (image at natural size, top-left) instead
   of our "contain"; align-items from the same rule did apply, which pinpointed it)
   Version: 9 – 2026-06-22 (hero "whole image" treatment moved up to the ≤968px
   breakpoint so the desktop mobile-preview and tablets get it too, not only
   ≤640px — the 600px height crops a landscape image well above phone widths)
   Version: 8 – 2026-06-22 ("What makes us special" is now a static, always-open
   list: .accordion-body display:block, chevron hidden, header not clickable —
   so points 2 and 3 are always visible (pairs with home.js, which drops the
   accordion click-toggle)
   Version: 7 – 2026-06-22 (mobile hero shows the WHOLE image: background-size
   contain, top-anchored, brand-colour band below with the text in it — was
   "cover" which cropped the image to a narrow vertical slice on phones)
   Version: 6 – 2026-06-20 (.accordion-item.active border now gray, not blue — "What makes us special" cards should match the other cards' gray borders)
   Version: 5 – 2026-06-04 (added .price-minimum-note styling for multi-week-total fallback prices)
   Site-specific colors via body classes
   ================================================== */

/* ==================================================
   COLOR VARIABLES - SITE SPECIFIC
   Set dynamically based on body class
   ================================================== */

/* Buenos Aires Colors */
.site-buenos-aires {
    --primary-brand: #004f80;
    --secondary-brand: #008fdd;
    --accent: #ffe033;
    --success: #70bf00;
    --danger: #ea2048;
    --hover: #2d6599;
    --background-tertiary: #f8fcfe;
}

/* Uruguay Colors */
.site-uruguay {
    --primary-brand: #004f80;
    --secondary-brand: #729dca;
    --accent: #ffe033;
    --success: #70bf00;
    --danger: #ea2048;
    --hover: #455f7a;
    --background-tertiary: #f2f7fc;
}

/* Bariloche Colors */
.site-bariloche {
    --primary-brand: #004f80;
    --secondary-brand: #c96828;
    --accent: #ffe033;
    --success: #70bf00;
    --danger: #ea2048;
    --hover: #8f4a1c;
    --background-tertiary: #fff9f5;
}

/* Shared/Neutral Colors (all sites) */
:root {
    --text-primary: #383838;
    --text-secondary: #7a7a7a;
    --text-tertiary: #aeaeae;
    --background: #fafafa;
    --background-secondary: #f5f5f5;
    --border-color: #d9d9d9;
    --white: #ffffff;
    --black: #000000;
}

/* ==================================================
   CONTAINER & GENERAL STYLES
   ================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.home-page {
    background: #ffffff;
}

.home-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==================================================
   HERO SECTION
   ================================================== */
.hero-section {
    position: relative;
    min-height: 420px;                 /* was 600px — lower hero like FIGMA */
    padding: 48px 32px;                 /* override the design-system's 80px inset */
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 80px;
}

/* The real <img> is mobile-only; desktop uses the background-image above.
   !important because a theme/plugin rule was leaking it onto desktop. */
.hero-mobile-image {
    display: none !important;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Darker on the left for white-text contrast, fading to fully clear on the
       right so the photo stays visible (FIGMA). Was a flat 0.7→0.3 that greyed
       out the whole image. */
    background: linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 38%, rgba(0,0,0,0) 70%);
}

/* Desktop hero text/buttons left-aligned (FIGMA). The design-system's
   .hero-content centres them (margin:0 auto; text-align:center); override with
   higher specificity so it wins regardless of stylesheet order. */
.hero-section .hero-content {
    max-width: 600px;
    margin: 0;
    text-align: left;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    color: #ffffff;
}

.hero-heading {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #ffffff;
}

.hero-subheading {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 32px;
    color: #ffffff;
    opacity: 0.95;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;   /* desktop: left-aligned (FIGMA) */
}

/* ==================================================
   COURSE FINDER SECTION
   ================================================== */
.course-finder-section {
    margin-bottom: 80px;
}

.course-finder-form {
    background: #ffffff;
    border: 1px solid var(--color-neutrals-200, #d9d9d9);
    border-radius: 50px;
    padding: 14px 14px 14px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0;
    align-items: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

.finder-field {
    padding: 6px 28px 6px 0;
    border-right: 1px solid var(--color-neutrals-200, #d9d9d9);
    margin-right: 28px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.finder-field:last-of-type {
    border-right: none;
    margin-right: 16px;
}

/* Label row: icon + text */
.finder-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-neutrals-700, #7a7a7a);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
}

/* Icon: matches FIGMA size and color */
.finder-field label .material-icons-outlined {
    font-size: 18px;
    color: var(--color-neutrals-700, #7a7a7a);
    vertical-align: middle;
    flex-shrink: 0;
}

/* Select value: larger, brand-colored like FIGMA */
.finder-select {
    width: 100%;
    padding: 2px 24px 2px 0;
    border: none;
    font-size: 16px;
    font-weight: 700;
    background: transparent;
    cursor: pointer;
    color: var(--color-deepblue-500, #004f80);
    -webkit-appearance: none;
    appearance: none;
    /* Blue chevron to match brand color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23004f80' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.finder-select:focus {
    outline: none;
    color: var(--color-deepblue-600, #004874);
}

#cf-search {
    padding: 14px 32px;
    white-space: nowrap;
    border-radius: 40px;
    align-self: center;
    font-size: 16px;
}

/* ==================================================
   TEXT + IMAGE SECTION
   ================================================== */
.text-image-section {
    margin-bottom: 80px;
}

.text-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.text-image-grid.image-left {
    grid-template-areas: "image text";
}

.text-image-grid.image-left .image-content {
    grid-area: image;
}

.text-image-grid.image-left .text-content {
    grid-area: text;
}

.text-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 12px;
    line-height: 1.3;
}

.text-content .content {
    margin-bottom: 24px;
    line-height: 1.7;
}

.image-content img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ==================================================
   PARTNER LOGOS SECTION
   ================================================== */
.partner-logos-section {
    margin-bottom: 80px;
    padding: 40px 0;
}

.logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 40px;
    align-items: center;
    justify-items: center;
}

.logo-item img {
    max-width: 120px;
    height: auto;
    opacity: 0.6;
    transition: opacity 0.3s;
    filter: grayscale(100%);
}

.logo-item img:hover {
    opacity: 1;
}

/* ==================================================
   ACCORDION SECTION
   ================================================== */
.accordion-section {
    margin-bottom: 80px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 700;
}

.accordion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.accordion-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0;                               /* FIGMA: separators, not gaps */
}

/* FIGMA: a clean borderless list with thin separators (no card boxes). */
.accordion-item {
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s;
}

.accordion-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color, #e6e6e6);
}

.accordion-header {
    width: 100%;
    padding: 18px 4px;
    background: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;                      /* it's a real toggle again */
    text-align: left;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: #fafafa;
}

/* The header is a <button>; the theme paints button:focus dark (it outranks a
   plain .accordion-header), which made the OPEN item's title unreadable.
   Force readable focus/active states and give the selected item a subtle light
   highlight instead — dark title text stays legible. */
.accordion-header:focus,
.accordion-header:active {
    background: #ffffff;
    box-shadow: none;
}
.accordion-header:focus { outline: none; }
.accordion-header:focus-visible {
    outline: 2px solid var(--secondary-brand, #008fdd);
    outline-offset: -2px;
}
.accordion-item.active .accordion-header {
    background: #eef3f9;            /* light "selected" tint, readable */
}

/* FIGMA: the leading icon sits in a light-grey circle and is grey, not blue. */
.accordion-header i.fa:first-child {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color, #d9d9d9);
    color: #8a8a8a;
    font-size: 18px;
}

.accordion-header span {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: #2b2b2b;
}

.accordion-icon {
    flex: 0 0 auto;
    display: inline-block;                /* chevron is back (was hidden) */
    color: #9a9a9a;
    font-size: 14px;
    transition: transform 0.3s;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0 4px 22px 62px;             /* text indented under the title */
    display: none;                        /* closed by default; JS slides it open, first item open via template */
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================================
   FEATURED COURSES SECTION
   ================================================== */
.featured-courses-section {
    margin-bottom: 80px;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.course-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.course-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}

.course-image {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-image .badge {
    position: absolute;
    top: 16px;
    left: 16px;
}

.course-content {
    padding: 24px;
}

.course-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.course-excerpt {
    color: var(--text-secondary, #7a7a7a);
    margin-bottom: 20px;
    line-height: 1.6;
}

.course-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-specs li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary, #7a7a7a);
}

.course-specs i {
    color: var(--secondary-brand, #008fdd);
}

.course-pricing {
    margin-bottom: 20px;
    padding-top: 20px;
    /* border-top removed – section divider handled by ::after dashed rule */
}

.course-pricing .discount {
    display: inline-block;
    color: var(--success, #70bf00);
    font-weight: 600;
    margin-bottom: 4px;
}

.course-pricing .original-price {
    display: inline-block;
    text-decoration: line-through;
    color: var(--text-secondary, #7a7a7a);
    font-size: 14px;
    margin-left: 8px;
}

.course-pricing .current-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #383838);
}

/* '/week' suffix — rendered as a real (translatable) span in the PHP
   output rather than a CSS ::after, so it works correctly with WPML
   and doesn't duplicate when academia_display_course_price() already
   includes the unit text. */
.course-pricing .current-price .price-unit {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary, #7a7a7a);
}

/* Shown for courses whose lowest available price comes from a multi-week
   total (e.g. Long Term, minimum 12 weeks, no single-week rate exists). */
.course-pricing .price-minimum-note {
    font-size: 13px;
    color: var(--text-secondary, #7a7a7a);
    margin-top: 2px;
}

/* ==================================================
   VIDEO STORIES SECTION
   ================================================== */
.video-stories-section {
    margin-bottom: 80px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.video-card {
    cursor: pointer;
    transition: transform 0.3s;
}

.video-card:hover {
    transform: translateY(-4px);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail .badge {
    position: absolute;
    top: 16px;
    left: 16px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.play-button:hover {
    background: #ffffff;
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button i {
    font-size: 24px;
    color: var(--secondary-brand, #008fdd);
    margin-left: 4px;
}

.video-info h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.video-info p {
    color: var(--text-secondary, #7a7a7a);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==================================================
   TESTIMONIALS SECTION
   ================================================== */
.testimonials-section {
    margin-bottom: 80px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.testimonial-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 12px;
    padding: 32px;
}

.testimonial-card .stars {
    margin-bottom: 16px;
}

.testimonial-card .stars i {
    color: #d9d9d9;
    font-size: 16px;
}

.testimonial-card .stars i.filled {
    color: var(--accent, #ffe033);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px;
    font-style: italic;
}

/* Clamp long testimonials to ~5 lines; full text remains in the DOM for
   accessibility/SEO, only the visual display is truncated. */
.testimonial-text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-read-more {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-brand, #008fdd);
    text-decoration: none;
}

.testimonial-read-more:hover {
    text-decoration: underline;
}

.testimonial-author strong {
    display: block;
    margin-bottom: 4px;
}

.testimonial-author span {
    color: var(--text-secondary, #7a7a7a);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==================================================
   MAP + CONTACT SECTION
   ================================================== */
.map-contact-section {
    margin-bottom: 80px;
}

.map-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-info h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
    line-height: 1.3;
}

.contact-details {
    margin-bottom: 32px;
}

.contact-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.contact-item i {
    font-size: 20px;
    color: var(--secondary-brand, #008fdd);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-item a {
    color: var(--text-primary, #383838);
    text-decoration: none;
}

.contact-item a:hover {
    color: var(--secondary-brand, #008fdd);
}

.map-container {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
}

#openstreet-map {
    width: 100%;
    height: 100%;
}

/* Custom Marker for OpenStreetMap */
.custom-marker {
    position: relative;
}

.marker-pin {
    width: 30px;
    height: 42px;
    border-radius: 50% 50% 50% 0;
    background: var(--secondary-brand, #008fdd);
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -21px 0 0 -15px;
}

.marker-pin::after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #ffffff;
    position: absolute;
    border-radius: 50%;
}

/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
}

.leaflet-popup-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ==================================================
   BADGES & UTILITIES
   ================================================== */
.badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-yellow {
    background: var(--accent, #ffe033);
    color: var(--text-primary, #383838);
}

.link-arrow {
    color: var(--secondary-brand, #008fdd);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s;
}

.link-arrow:hover {
    gap: 12px;
}

.section-heading {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
}

.section-heading.center {
    text-align: center;
}

.center {
    text-align: center;
}

/* ==================================================
   BUTTONS
   ================================================== */
.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--secondary-brand, #008fdd);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--hover, #2d6599);
}

.btn-secondary {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.2);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ==================================================
   RESPONSIVE DESIGN
   ================================================== */
@media (max-width: 968px) {
    /* Mobile/tablet hero (FIGMA): the image is a real <img> at the very top,
       full width with rounded corners, and the text sits BELOW it on the page's
       light background — dark heading, grey subheading, centred. No blue band.
       The design-system's same-named .hero-section forces padding:80px, a blue
       gradient and white text on this element; we override all three here. */
    .hero-section {
        background-image: none !important;  /* kill the design-system blue gradient */
        background-color: transparent;      /* FIGMA: no blue band */
        color: inherit;                     /* design-system forces white; reset */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0;                         /* kill the 80px inset → image flush & full width */
        border-radius: 0;
        overflow: visible;
        margin-bottom: 40px;
    }

    /* The real image: whole picture, full width, rounded card, on top.
       !important to override the desktop hide (which is also !important). */
    .hero-mobile-image {
        display: block !important;
        width: 100%;
        height: auto;
        border-radius: 16px;
    }

    .hero-overlay {
        display: none;
    }

    /* Text block below the image, centred. Specificity matches the desktop
       left-align override so this wins inside the media query (later in source). */
    .hero-section .hero-content {
        max-width: none;
        margin: 0;
        padding: 24px 0 0;
        text-align: center;
    }

    .hero-ctas {
        justify-content: center;        /* centre the buttons under the centred text */
    }

    .hero-heading {
        font-size: 36px;
        color: #2b2b2b;                     /* dark, not white (FIGMA) */
    }
    
    .hero-subheading {
        font-size: 18px;
        color: #6b7280;                     /* muted grey (FIGMA) */
        opacity: 1;
    }

    /* The secondary CTA ("Test my Spanish") sat white-on-white once the blue
       band was removed. Give it the brand blue for border + text so it's
       visible on the light background (FIGMA: white button, blue outline). */
    .hero-ctas .btn-secondary {
        background: #ffffff;
        border-color: var(--secondary-brand, #008fdd);
        color: var(--secondary-brand, #008fdd);
    }
    .hero-ctas .btn-secondary:hover {
        background: var(--secondary-brand, #008fdd);
        color: #ffffff;
    }

    .text-image-grid,
    .accordion-grid,
    .map-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .text-image-grid.image-left {
        grid-template-areas: "text" "image";
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .course-finder-form {
        grid-template-columns: 1fr;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    /* Hero now sizes to its content (image + text band); just shrink the type. */
    .hero-heading {
        font-size: 28px;
    }
    
    .hero-subheading {
        font-size: 16px;
    }
    
    .hero-ctas {
        flex-direction: column;
    }
    
    .hero-ctas .btn {
        width: 100%;
        text-align: center;
    }

    /* "What makes us special" accordion: tighter on phones. */
    .accordion-header i.fa:first-child {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .accordion-header span {
        font-size: 16px;
    }
    .accordion-body {
        padding-left: 16px;               /* full-width text rather than deep indent */
    }
}


/* ==================================================
   VIDEO CARD – Name/Country as bottom overlay (per SOLL)
   ================================================== */
.video-info { display: none; }  /* moved into overlay */

.video-overlay-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.video-overlay-info .video-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.video-overlay-info .video-country {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
}