/* ============================================================
   Holy Isle — Courses Loop  courses.css
   v1.0
   ============================================================ */

/* ── Custom properties ───────────────────────────────────────────────────── */

:root {
    /* Status */
    --crs-c-fully-booked: #666;

    /* Card chrome */
    --crs-card-bg:           var(--wp--preset--color--card, #ffffff);
    --crs-card-border:       var(--wp--preset--color--borders, rgba(106,170,130,0.44));
    --crs-card-radius:       16px;
    --crs-card-shadow:       0 4px 15px rgba(22, 51, 74, 0.07);
    --crs-card-shadow-hover: 0 8px 25px rgba(22, 51, 74, 0.13);

    /* Image */
    --crs-card-img-width: 45%;

    /* Typography */
    --crs-font-serif: var(--wp--preset--font-family--montserrat, Georgia, serif);
    --crs-font-sans:  var(--wp--preset--font-family--inter, system-ui, sans-serif);

    /* Spacing */
    --crs-card-padding: var(--wp--preset--spacing--50);
    --crs-stack-gap:    var(--wp--preset--spacing--20);

    /* Text */
    --crs-t-heading: var(--wp--preset--color--navy,    #1b3f5c);
    --crs-t-body:    var(--wp--preset--color--grey,    #2f3d45);
    --crs-t-muted:   var(--wp--preset--color--dark,    #16334a);
    --crs-t-subtle:  #6a8a9a;

    /* Accent */
    --crs-c-green:   var(--wp--preset--color--green,   #2a6048);
    --crs-c-sage:    var(--wp--preset--color--sage,    #6aaa82);
    --crs-c-navy:    var(--wp--preset--color--navy,    #1b3f5c);
    --crs-c-gold:    var(--wp--preset--color--gold,    #c8b445);

    /* Misc */
    --crs-btn-radius:   var(--crs-card-radius);
    --crs-badge-radius: 8px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

.courses-container *,
.courses-container *::before,
.courses-container *::after {
    box-sizing: border-box;
}

/* ── Ribbon ──────────────────────────────────────────────────────────────── */

.ribbon--fully-booked {
    background: var(--crs-c-fully-booked);
}

.course-card__ribbon {
    position:       absolute;
    top:            20px;
    left:           -6px;
    z-index:        20;
    color:          #fff;
    font-family:    var(--crs-font-sans);
    font-size:      var(--wp--preset--font-size--small, 0.85rem);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        7px 18px 7px 14px;
    border-radius:  0 var(--crs-card-radius) var(--crs-card-radius) 0;
    box-shadow:     2px 2px 8px rgba(0,0,0,0.25);
    border:         0.5px solid rgba(255,255,255,0.25);
    border-left:    none;
    pointer-events: none;
}

.course-card__ribbon::after {
    content:    '';
    position:   absolute;
    top:        100%;
    left:       0;
    width:      6px;
    height:     6px;
    background: #333;
    clip-path:  polygon(0 0, 100% 0, 100% 100%);
    filter:     brightness(0.5);
}

/* ── Filter nav ──────────────────────────────────────────────────────────── */

.courses-filter {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       nowrap;
    gap:             0.5rem;
    overflow-x:      auto;
    padding:         var(--wp--preset--spacing--30, 1rem) 0;
    -webkit-overflow-scrolling: touch;
}

.filter-btn {
    padding:        0.5rem 1.25rem;
    border:         1px solid var(--crs-card-border);
    background:     var(--wp--preset--color--paper, #f5f8fa);
    color:          var(--crs-c-navy);
    border-radius:  999px;
    cursor:         pointer;
    font-family:    var(--crs-font-sans);
    font-size:      var(--wp--preset--font-size--small, 0.85rem);
    font-weight:    600;
    white-space:    nowrap;
    transition:     all 0.18s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--crs-c-navy);
    color:      #fff;
    border-color: var(--crs-c-navy);
}

/* ── Section / month headers ─────────────────────────────────────────────── */

.courses-section-header,
.courses-month-header {
    max-width:      1200px;
    margin-left:    auto;
    margin-right:   auto;
    font-family:    var(--crs-font-serif);
    font-size:      var(--wp--preset--font-size--large, 1.2rem);
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--crs-c-navy);
    padding-left:   var(--wp--preset--spacing--80, 2rem);
    margin-top:     var(--wp--preset--spacing--60, 2rem);
    margin-bottom:  var(--wp--preset--spacing--40, 1rem);
    padding-bottom: 0.5rem;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--crs-card-border) 20%,
        var(--crs-card-border) 80%,
        transparent 100%
    );
    background-position: bottom center;
    background-size:     100% 1px;
    background-repeat:   no-repeat;
}

.courses-section-header--featured {
    color: var(--crs-c-sage);
}

.courses-featured-section {
    margin-bottom: var(--wp--preset--spacing--80, 3rem);
}

.courses-month-group {
    margin-bottom: var(--wp--preset--spacing--80, 3rem);
}

.courses-month-group .course-card:last-child {
    margin-bottom: 0;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.course-card {
    position:       relative;
    max-width:      1200px;
    margin-left:    auto;
    margin-right:   auto;
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
    background:     var(--crs-card-bg);
    border:         1px solid var(--crs-card-border) !important;
    border-radius:  var(--crs-card-radius);
    margin-bottom:  var(--wp--preset--spacing--60, 2rem);
    box-shadow:     var(--crs-card-shadow);
    transition:     all 0.2s ease;
}

.course-card:hover {
    box-shadow: var(--crs-card-shadow-hover);
    transform:  translateY(-2px);
}

/* Fully booked — desaturate */
.course-card--fully-booked {
    opacity: 0.72;
    filter:  saturate(0.4);
}

.course-card--fully-booked:hover {
    opacity: 0.85;
    filter:  saturate(0.6);
}

/* ── Card image ──────────────────────────────────────────────────────────── */

.course-card__image {
    width:         var(--crs-card-img-width);
    flex-shrink:   0;
    overflow:      hidden;
    border-radius: var(--crs-card-radius) 0 0 var(--crs-card-radius);
}

.course-card__image-link {
    display: block;
    height:  100%;
}

.course-card__img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.3s ease;
}

.course-card:hover .course-card__img {
    transform: scale(1.03);
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.course-card__body {
    flex:    1;
    display: flex;
    flex-direction: column;
    padding: var(--crs-card-padding);
    gap:     0;
}

/* ── Type pills ──────────────────────────────────────────────────────────── */

.course-card__type-labels {
    display:     flex;
    justify-content: flex-end;
    flex-wrap:   wrap;
    gap:         0.4rem;
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}

.course-term-pill {
    display:        inline-block;
    padding:        3px 10px;
    background:     color-mix(in srgb, var(--crs-c-sage) 15%, transparent);
    color:          var(--crs-c-green);
    border:         1px solid color-mix(in srgb, var(--crs-c-sage) 40%, transparent);
    border-radius:  999px;
    font-size:      var(--wp--preset--font-size--small, 0.8rem);
    font-weight:    600;
    letter-spacing: 0.04em;
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.course-card__title {
    margin:  0 0 var(--wp--preset--spacing--30, 0.75rem) 0;
    padding: 0;
}

.course-card__title a {
    color:           var(--crs-c-navy);
    text-decoration: none;
    font-family:     var(--crs-font-serif);
    font-size:       var(--wp--preset--font-size--x-large, 1.4rem);
    font-weight:     600;
    line-height:     1.2;
    transition:      color 0.15s ease;
}

.course-card__title a:hover {
    color: var(--crs-c-green);
}

/* ── Date row ────────────────────────────────────────────────────────────── */

.course-card__date-row {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 6px;
}

.course-card__calendar-icon {
    flex-shrink: 0;
    color:       var(--crs-c-sage);
}

.course-dates {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         0.35rem;
    font-family: var(--crs-font-sans);
    font-size:   var(--wp--preset--font-size--large, 1.1rem);
    font-weight: 700;
    color:       var(--crs-t-muted);
    line-height: 1.4;
}

.course-dates__separator {
    font-weight: 400;
    color:       var(--crs-t-body);
    padding:     0 2px;
}

/* ── Leaders ─────────────────────────────────────────────────────────────── */

.course-card__leaders {
    margin:      var(--wp--preset--spacing--20, 0.5rem) 0;
    font-family: var(--crs-font-sans);
    font-size:   var(--wp--preset--font-size--medium, 1rem);
    color:       var(--crs-t-body);
}

.course-meta-label {
    font-weight:  600;
    color:        var(--crs-t-subtle);
    margin-right: 4px;
}

.course-card__leaders a {
    color:           var(--crs-c-green);
    font-weight:     500;
    text-decoration: none;
}

.course-card__leaders a:hover {
    text-decoration: underline;
}

/* ── Fee popover ─────────────────────────────────────────────────────────── */

.course-card__fee {
    position:      relative;
    display:       inline-flex;
    align-items:   center;
    margin:        var(--wp--preset--spacing--20, 0.5rem) 0;
}

.course-card__fee-trigger {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-size:   var(--wp--preset--font-size--medium);
    font-weight: 600;
    color:       var(--crs-c-green);
    cursor:      pointer;
    border:      1px solid color-mix(in srgb, var(--crs-c-sage) 50%, transparent);
    border-radius: 999px;
    padding:     4px 12px;
    background:  color-mix(in srgb, var(--crs-c-sage) 10%, transparent);
    transition:  all 0.15s ease;
    user-select: none;
}

.course-card__fee-trigger:hover,
.course-card__fee-trigger:focus-visible {
    background:  color-mix(in srgb, var(--crs-c-sage) 25%, transparent);
    outline:     none;
}

/* Popover — hidden by default, shown on hover or .is-visible */
.course-card__fee-popover {
    display:       none;
    position:      absolute;
    bottom:        calc(100% + 8px);
    left:          0;
    z-index:       100;
    min-width:     260px;
    max-width:     340px;
    background:    var(--wp--preset--color--card, #fff);
    border:        1px solid var(--crs-card-border);
    border-radius: 10px;
    box-shadow:    0 8px 24px rgba(22,51,74,0.14);
    padding:       1rem 1.1rem;
    font-size:     var(--wp--preset--font-size--medium);
    color:         var(--crs-t-body);
    line-height:   1.6;
}

/* Show on hover */
.course-card__fee-trigger:hover + .course-card__fee-popover,
.course-card__fee-trigger:hover ~ .course-card__fee-popover,
.course-card__fee-popover.is-visible {
    display: block;
}

/* Popover inner content */
.course-card__fee-popover p  { margin: 0 0 0.4rem; }
.course-card__fee-popover strong { color: var(--crs-c-navy); }
.course-card__fee-popover ul {
    margin:     0.4rem 0 0;
    padding-left: 1.2rem;
}

/* ── Excerpt ─────────────────────────────────────────────────────────────── */

.course-card__excerpt {
    font-family:        var(--crs-font-sans);
    font-size:          var(--wp--preset--font-size--medium, 1rem);
    line-height:        1.6;
    color:              var(--crs-t-body);
    margin:             var(--wp--preset--spacing--20, 0.5rem) 0;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.course-card__actions {
    display:         flex;
    align-items:     center;
    justify-content: space-around;
    margin-top:      auto;
    padding-top:     var(--wp--preset--spacing--30, 0.75rem);
    gap:             1rem;
}

.course-read-more {
    font-family:     var(--crs-font-sans);
    font-size:       var(--wp--preset--font-size--medium, 1rem);
    font-weight:     600;
    color:           var(--crs-c-navy);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.course-read-more:hover {
    color: var(--crs-c-green);
}

/* Green booking button — matches activity-btn--enquiry from SL */
.activity-btn {
    display:         inline-block;
    padding:         0.6rem 1.4rem;
    border-radius:   var(--crs-btn-radius);
    font-size:       var(--wp--preset--font-size--medium, 1rem);
    color:           #fff;
    border:          0.5px solid rgba(255,255,255,0.2);
    font-weight:     700;
    text-decoration: none;
    cursor:          pointer;
    transition:      filter 0.2s ease;
    box-shadow:      2px 2px 8px rgba(0,0,0,0.2);
}

.activity-btn--enquiry {
    background-color: var(--crs-c-green);
}

.activity-btn:hover {
    filter: brightness(1.1);
}

/* ── Related grid ────────────────────────────────────────────────────────── */

.cr-wrapper {
    padding: 0 var(--wp--preset--spacing--20, 0.5rem);
}

.cr-wrapper .course-card {
    border: none;
}

.cr-grid {
    padding-top: var(--wp--preset--spacing--30, 0.75rem);
}

.cr-heading {
    max-width:    750px;
    text-align: center;
    margin-left:  auto;
    margin-right: auto;
    font-family:  var(--crs-font-serif);
    color: var(--wp--preset--color--navy);
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--wp--preset--color--borders) 20%,
        var(--wp--preset--color--borders) 80%,
        transparent 100%
    ) !important;
    background-position: bottom center !important;
    background-size: 100% 1px !important;
    background-repeat: no-repeat !important;
    font-weight: 600 !important;
    padding: var(--wp--preset--spacing--20) !important;
}


.cr-heading--light {
    color: var(--wp--preset--color--paper) !important;
}


.cr-cta {
    text-align: center;
    margin-top: var(--wp--preset--spacing--40, 1rem);
}

.cr-cta__link {
    display: inline-block;
    font-family: var(--crs-font-sans);
    font-weight: 600;
    color: var(--wp--preset--color--paper);
    text-decoration: none;
    background-color: var(--wp--preset--color--green);
    padding: 0.6rem 1.8rem;
    border-radius: 16px;
    border: 1px solid var(--wp--preset--color--borders);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cr-cta__link:hover {
    background-color: var(--wp--preset--color--sage);
    color: var(--wp--preset--color--card);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* ── Loading / empty states ──────────────────────────────────────────────── */

.courses-loading {
    display:     flex;
    align-items: center;
    justify-content: center;
    min-height:  14rem;
    font-style:  italic;
    color:       var(--crs-t-subtle);
}

.courses-loading::before {
    content:       '';
    width:         1.2rem;
    height:        1.2rem;
    margin-right:  0.75rem;
    border:        2px solid var(--crs-card-border);
    border-top-color: var(--crs-c-sage);
    border-radius: 50%;
    animation:     crs-spin 0.7s linear infinite;
}

@keyframes crs-spin { to { transform: rotate(360deg); } }

.courses-empty {
    padding:    3.5rem 1rem;
    text-align: center;
    font-style: italic;
    color:      var(--crs-t-subtle);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

    .courses-loop-wrapper {
        margin-left:  10px;
        margin-right: 10px;
    }

    .course-card {
        flex-direction: column;
        margin-bottom:  var(--wp--preset--spacing--80, 3rem);
    }

    .course-card__image {
        width:         100%;
        aspect-ratio:  4 / 3;
        flex:          none;
        border-radius: var(--crs-card-radius) var(--crs-card-radius) 0 0;
    }

    .course-card__body {
        padding: var(--wp--preset--spacing--30, 0.75rem);
    }

    .courses-section-header,
    .courses-month-header {
        padding-left: unset;
        text-align:   center;
    }

    /* Popover flips below trigger on mobile */
    .course-card__fee-popover {
        bottom: auto;
        top:    calc(100% + 8px);
        left:   0;
        right:  0;
        max-width: 100%;
    }
}