/* ============================================================
 * courses-feature section
 * Rendered from resources/views/components/sections/courses-feature.blade.php
 * ============================================================ */

/* ------------------------------------------------------------------
       Open courses, this term — image-led card grid.
       Palette: parchment #F7F1E8 bg, card #FFFDFC, ink #171311,
       muted #5F564F, brass #B68A45, walnut #4A2E1F, border #DED4C8.
       ------------------------------------------------------------------ */
    .cf {
      background: #F7F1E8;
      color: #171311;
      padding-block: clamp(4rem, 6vw, 6.5rem);
    }
    .cf__inner {
      max-width: 76rem;              /* ~1216px */
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 4vw, 2rem);
    }

    /* -------- Header -------- */
    .cf__head { display: grid; gap: 1.75rem; }
    .cf__eyebrow {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #B68A45;
      margin: 0 0 0.65rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      flex-wrap: wrap;
    }
    .cf__eyebrow-sep {
      display: inline-block;
      color: #C9BAA1;
      font-weight: 400;
    }
    .cf__eyebrow-dim {
      color: #5F564F;
      letter-spacing: 0.18em;
      font-weight: 500;
    }
    .cf__h2 {
      font-family: var(--font-display-stack, 'Marcellus', 'Playfair Display', Georgia, serif);
      font-weight: 400;
      font-size: clamp(2.1rem, 4.5vw, 3.4rem);
      line-height: 1.04;
      letter-spacing: -0.015em;
      color: #171311;
      margin: 0 0 0.85rem;
    }
    .cf__lede {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: clamp(1rem, 1.05vw, 1.1rem);
      line-height: 1.65;
      color: #5F564F;
      max-width: 36rem;
      margin: 0;
    }
    .cf__meta-body {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.95rem;
      line-height: 1.6;
      color: #171311;
      margin: 0;
    }
    .cf__meta-dim { color: #5F564F; }

    @media (min-width: 56rem) {
      .cf__head {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: end;
        column-gap: 3rem;
      }
      .cf__head-meta {
        padding-left: 2rem;
        border-left: 1px solid #DED4C8;
      }
    }

    /* -------- Card grid -------- */
    .cf__grid {
      list-style: none;
      margin: clamp(2.5rem, 4.5vw, 3.75rem) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
    @media (min-width: 40rem) {
      .cf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
    }
    @media (min-width: 68rem) {
      .cf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
    }

    .cf__card {
      display: flex;
      flex-direction: column;
      background: #FFFDFC;
      border: 1px solid #DED4C8;
      border-radius: 20px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      height: 100%;
      transition:
        border-color 220ms ease,
        transform    220ms ease,
        box-shadow   220ms ease;
      will-change: transform;
    }
    .cf__card:hover,
    .cf__card:focus-visible {
      border-color: #B68A45;
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -22px rgba(23, 19, 17, 0.28);
      outline: none;
    }
    .cf__card:focus-visible {
      box-shadow:
        0 0 0 3px rgba(182, 138, 69, 0.35),
        0 16px 32px -22px rgba(23, 19, 17, 0.28);
    }

    /* Image */
    .cf__card-img {
      margin: 0;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #EFE3D3;
    }
    .cf__card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 500ms ease;
    }
    .cf__card:hover .cf__card-img img,
    .cf__card:focus-visible .cf__card-img img {
      transform: scale(1.03);
    }

    /* Body */
    .cf__card-body {
      padding: 1.5rem 1.4rem 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      flex: 1;
    }
    @media (min-width: 40rem) {
      .cf__card-body { padding: 1.6rem 1.5rem 1.5rem; }
    }

    .cf__level {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #B68A45;
      margin: 0;
    }
    .cf__title {
      font-family: var(--font-display-stack, 'Marcellus', 'Playfair Display', Georgia, serif);
      font-weight: 400;
      font-size: clamp(1.35rem, 1.6vw, 1.6rem);
      line-height: 1.15;
      letter-spacing: -0.005em;
      color: #171311;
      margin: 0 0 0.25rem;
    }
    .cf__summary {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.9rem;
      line-height: 1.6;
      color: #5F564F;
      margin: 0 0 0.4rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Meta list */
    .cf__meta {
      margin: 0.5rem 0 0;
      padding-top: 0.9rem;
      border-top: 1px solid #DED4C8;
      display: grid;
      row-gap: 0.4rem;
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
    }
    .cf__meta > div {
      display: grid;
      grid-template-columns: 3.6rem minmax(0, 1fr);
      column-gap: 0.75rem;
      align-items: baseline;
    }
    .cf__meta dt {
      font-size: 0.63rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #5F564F;
      margin: 0;
    }
    .cf__meta dd {
      font-size: 0.88rem;
      line-height: 1.45;
      color: #171311;
      margin: 0;
    }

    /* Per-card CTA — full-width filled button at the bottom of the card */
    .cf__cta {
      margin-top: auto;
      margin-inline: 0;
      align-self: stretch;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      padding: 0.85rem 1.1rem;
      background: #4A2E1F;
      color: #FFFFFF;
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 14px;
      border: 1px solid #4A2E1F;
      transition:
        background-color 200ms ease,
        border-color     200ms ease,
        transform        200ms ease,
        box-shadow       200ms ease;
    }
    .cf__cta-arrow {
      display: inline-block;
      transition: transform 220ms ease;
    }
    .cf__card:hover .cf__cta,
    .cf__card:focus-visible .cf__cta {
      background: #5D3B29;
      border-color: #5D3B29;
      box-shadow: 0 6px 14px -6px rgba(74, 46, 31, 0.45);
    }
    .cf__card:hover .cf__cta-arrow,
    .cf__card:focus-visible .cf__cta-arrow {
      transform: translateX(4px);
    }

    /* -------- Footer of the section (site-wide CTA) -------- */
    .cf__foot {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: clamp(2.25rem, 3.5vw, 3.5rem);
      padding-top: 1.5rem;
      border-top: 1px solid #DED4C8;
    }
    @media (min-width: 40rem) {
      .cf__foot { flex-direction: row; align-items: center; justify-content: space-between; }
    }
    .cf__foot-note {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.92rem;
      color: #5F564F;
      margin: 0;
    }
    .cf__foot-cta {
      font-family: var(--font-body-stack, 'Inter', system-ui, sans-serif);
      font-size: 0.92rem;
      font-weight: 600;
      color: #FFFFFF;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 0.95rem 1.6rem;
      background: #4A2E1F;
      border: 1px solid #4A2E1F;
      border-radius: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      box-shadow: 0 6px 18px -10px rgba(74, 46, 31, 0.55);
      transition:
        background-color 200ms ease,
        border-color     200ms ease,
        box-shadow       200ms ease,
        transform        200ms ease;
    }
    .cf__foot-cta:hover,
    .cf__foot-cta:focus-visible {
      background: #5D3B29;
      border-color: #5D3B29;
      box-shadow: 0 10px 24px -10px rgba(74, 46, 31, 0.55);
      transform: translateY(-1px);
      outline: none;
    }
    .cf__foot-cta:focus-visible {
      box-shadow:
        0 0 0 3px rgba(182, 138, 69, 0.35),
        0 10px 24px -10px rgba(74, 46, 31, 0.55);
    }
    .cf__foot-cta-arrow {
      display: inline-block;
      transition: transform 200ms ease;
    }
    .cf__foot-cta:hover .cf__foot-cta-arrow,
    .cf__foot-cta:focus-visible .cf__foot-cta-arrow {
      transform: translateX(4px);
    }
    @media (max-width: 39.99rem) {
      .cf__foot-cta { align-self: stretch; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cf__card, .cf__cta-arrow, .cf__cta, .cf__card-img img {
        transition: none !important;
      }
      .cf__card:hover { transform: none; }
    }