/* Inter + Cormorant Garamond now load from the 'jdv-fonts' stylesheet handle
   registered in functions.php, and this file declares it as a dependency.
   They used to load from an @import on this line: that survives locally, but
   WP Rocket concatenates CSS on staging, which leaves the @import mid-file
   where the browser ignores it - so Inter never loaded and the text fell back
   to a system sans. Do not put an @import back here. */

/* All rules are scoped to .jdv-explore (or its sibling overlay) so they
   cannot affect the surrounding WordPress theme. */
.jdv-explore,
.jdv-filter{
  --jdv-beige:#F3EBDB;      /* header / hero background - the design's panel cream */
  --jdv-cream:#FBF4E7;      /* main background */
  --jdv-ink:#463D30;        /* dark brown text + dark buttons */
  --jdv-ink-soft:#6B6253;   /* secondary text */
  --jdv-rust:#9C3520;       /* logo */
  --jdv-line:#D9D0BF;       /* hairlines */
  /* Category pill outline. Darker than --jdv-line because those pills carry no
     fill - a #D9D0BF hairline on bare cream all but disappears. Sampled off
     the comp: its darkest outline pixel is #79756F, and since anti-aliasing
     can only blend toward the background the real stroke is at least that
     dark. #7C7467 is --jdv-ink at ~70% over cream, which reproduces it. */
  --jdv-line-strong:#7C7467;
  --jdv-tag-bg:#EFE8D8;     /* tag pill background on cream */
  --jdv-tag-bg-solid:#FFFFFF;
  --jdv-green:#EDFFE0;      /* filter overlay background */
  --jdv-green-line:#5C5142; /* filter pill border */
  --jdv-radius-card:0;      /* design uses sharp-cornered visuals, not rounded */
  --jdv-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* The site's heading face. Elementor's global kit sets every h1-h6 to
     "IM Fell English" (post-8.css: h2 is 45px/400), and child header.php
     loads it from Google Fonts, so this token is the same type the rest of
     the site's headings already use - not a second display face. */
  --jdv-display:'IM Fell English', Georgia, 'Times New Roman', serif;
  /* The design's heading sizes, which are NOT the Elementor kit's. The kit
     sets h1/h2/h3 to 70/45/30px; the comp is 55/40/24. Every heading on this
     page therefore has to state its own size and out-specify the kit, or it
     silently renders at the kit's. Named here so the scale lives in one
     place rather than being retyped per rule. */
  --jdv-h1:55px;
  --jdv-h2:40px;
  --jdv-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.jdv-explore *,
.jdv-filter *{ box-sizing:border-box; }

.jdv-explore{
  background:var(--jdv-cream);
  color:var(--jdv-ink);
  font-family:var(--jdv-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
.jdv-explore a{ text-decoration:none; color:inherit; }

/* ---------- page gutter ----------
   This has to be the header's gutter, or nothing on the page lines up with
   the logo above it - which is what the review caught on the hero heading.
   The site header renders inside Bootstrap's `.container` (see
   template-parts/header/header-1-fullwidth.php, `container container-header`),
   so the logo's left edge is Bootstrap's: a stepped max-width with a
   --bs-gutter-x padding. This container was a flat 1240px with 40px padding,
   which at a 1440px viewport starts ~69px further in than the logo does.

   The steps below are Bootstrap 5's own container ladder, and the padding
   reads the same custom property with the same fallback Bootstrap uses, so
   the two cannot drift apart if that value is ever changed. Note the theme's
   root font-size is 15px, not 16 - .75rem is 11.25px here. */
.jdv-container{
  max-width:100%;
  margin:0 auto;
  padding:0 var(--bs-gutter-x, .75rem);
  width:100%;
}
@media (min-width:576px) { .jdv-container{ max-width:540px; } }
@media (min-width:768px) { .jdv-container{ max-width:720px; } }
@media (min-width:992px) { .jdv-container{ max-width:960px; } }
@media (min-width:1200px){ .jdv-container{ max-width:1140px; } }
@media (min-width:1400px){ .jdv-container{ max-width:1320px; } }

/* ---------- buttons (shared) ---------- */
.jdv-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--jdv-sans); font-size:14px; font-weight:500;
  border-radius:999px; padding:9px 20px; cursor:pointer; border:1px solid transparent;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.jdv-btn--ghost{ background:#F3EEE2; color:var(--jdv-ink); }
.jdv-btn--ghost:hover{ background:#ECE5D6; }
.jdv-btn--dark{ background:var(--jdv-ink); color:#F4EFE3; }
.jdv-btn--dark:hover{ opacity:.9; }

.jdv-iconbtn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--jdv-ink); cursor:pointer; border-radius:50%;
}
.jdv-iconbtn:hover{ background:rgba(0,0,0,.05); }

/* ---------- header ---------- */
.jdv-header{
  background:var(--jdv-beige);
  position:sticky; top:0; z-index:30;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.jdv-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:62px;
}
.jdv-logo{ display:flex; flex-direction:column; line-height:1; }
.jdv-logo__mark{
  font-family:var(--jdv-serif); font-weight:600; font-size:26px;
  letter-spacing:.5px; color:var(--jdv-rust);
}
.jdv-logo__sub{ font-size:8px; color:var(--jdv-rust); opacity:.85; margin-top:2px; }

.jdv-nav{ display:flex; align-items:center; gap:34px; }
.jdv-nav__link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--jdv-ink); position:relative; padding:4px 0;
}
.jdv-nav__link.is-active{ color:var(--jdv-rust); }
.jdv-nav__chev{ transition:transform .2s ease; }

.jdv-header__actions{ display:flex; align-items:center; gap:12px; }

.jdv-burger{
  display:none; flex-direction:column; gap:4px; width:34px; height:34px;
  background:transparent; border:none; cursor:pointer; padding:7px 6px;
}
.jdv-burger span{ height:1.6px; background:var(--jdv-ink); border-radius:2px; }

/* ---------- hero ---------- */
.jdv-hero{ background:var(--jdv-beige); padding:30px 0 56px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
/* The title column follows the design at ~400px including the gap. It was
   280px, sized for a 40px Cormorant title; the H2 face below is larger and
   "conversations," alone is ~265px wide at that size, so the narrow column
   would have forced the word past its own edge. The carousel keeps 1fr and
   simply shows a little less of the trailing peek. */
.jdv-hero__inner{ display:grid; grid-template-columns:360px 1fr; gap:40px; align-items:start; }
/* Scoped under .jdv-explore for the same reason as .jdv-intro__title further
   down: the kit's global `.elementor-kit-8 h1` (70px) out-specifies a bare
   .jdv-hero__title, so the 4px this rule used to carry never surfaced as a
   visible bug - the kit quietly won every page load and the title rendered
   at 70px, well over the design. Scoping puts the size back under our
   control; unscope it and 70px returns. */
.jdv-explore .jdv-hero__title{
  /* The site's H2 text style, not a style of its own. This heading was set
     in Cormorant Garamond at 40px/500 while every other heading on the page
     - including .jdv-intro__title right below it - takes the Elementor kit's
     "IM Fell English" 45px/400, so the two sat side by side in two different
     serifs. The tag stays <h1> for document structure; only the type style
     is the H2 one. */
  font-family:var(--jdv-display); font-weight:400; font-size:var(--jdv-h2); line-height:1.1;
  margin:14px 0 0; max-width:340px;
  /* Belt and braces on the "fl" in "reflections". The visible bug was a
     literal U+FB02 ligature character sitting in the template, which fell
     back to Georgia and rendered bolder than its neighbours; that is fixed
     in page-explore.php and this property never had any bearing on it -
     font-variant-ligatures only governs f+l the font joins *itself*. It
     stays to stop Cormorant re-forming the ligature now the source is
     plain ASCII, which would land the same heavy joined stroke back on
     screen by a different route. */
  font-variant-ligatures: none;
}
.jdv-hero__carousel{ min-width:0; }
.jdv-hero__track{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:6px;
  /* the focused slide is taller than the rest - align tops so the row sits
     on one line instead of the short cards centring against the tall one */
  align-items:flex-start;
  /* page-explore.js sets an inline min-height here, holding the tallest state
     the rail can reach, so the rail never takes its height from whichever
     card happens to be focused. Without it the whole hero section breathed on
     every swap: mid-transition the outgoing card has shrunk toward 180px
     while the incoming one has not yet reached 264px, so the tallest child -
     and the section with it - sagged and sprang back each time.

     The figure is measured rather than written here because it depends on the
     loop's actual content: title length, whether the post carries a duration,
     and how the title re-wraps at the focused width. Any constant would be
     dead space under one set of posts and too short for the next. */
}
.jdv-hero__track::-webkit-scrollbar{ display:none; }

/* ---------- drag to scroll (mouse) ----------
   Touch devices swipe these natively; the JS adds the same for a mouse.
   scroll-behavior:smooth has to be off while dragging, otherwise every
   scrollLeft assignment animates and the drag feels laggy and detached. */
.jdv-hero__track,
.jdv-rail__track{ cursor:grab; }
.jdv-hero__track.is-grabbing,
.jdv-rail__track.is-grabbing{
  cursor:grabbing;
  scroll-behavior:auto;
  user-select:none;
  -webkit-user-select:none;
}
.jdv-hero__track.is-grabbing *,
.jdv-rail__track.is-grabbing *{ cursor:grabbing; }

/* Hero slides come in exactly two sizes: the slide at the front of the rail
   is shown large, and every other slide sits back at one identical smaller
   size - same width and same height as each other, so the rail reads as a
   row of equal cards with a single hero in front.

   Heights are explicit rather than aspect-ratio. Driving the two sizes off
   two different ratios at two different widths made the "big" card come out
   360x247 against a 200x266 peek - wider but shorter, which is what made the
   focus look broken. Both dimensions now grow together.

   The focused pair is 440x320 against the 200x180 peek, sized off the design
   comp: there the front card is a little over twice the width of the one
   behind it, which is the proportion that makes it read as the hero of the
   row rather than just the first of several.

   Smaller is the default, so the rail still reads correctly before JS runs
   and if it never does; page-explore.js moves .is-focused as it scrolls. */
/* The swap between those two sizes is animated rather than instant - snapping
   a card 200px->440px in one frame was the lurch the hero was reported for.
   page-explore.js reads this duration back off the element with
   getComputedStyle and keeps the rail pinned for exactly that long, so the
   number lives here only and the two cannot drift apart. Keep flex-basis and
   max-width on the same timing: they set the same edge, and letting them run
   at different speeds makes the card visibly fight itself. */
.jdv-feature{
  flex:0 0 200px; max-width:200px;
  transition:flex-basis .32s cubic-bezier(.22,.61,.36,1),
             max-width  .32s cubic-bezier(.22,.61,.36,1);
}
.jdv-feature.is-focused{ flex:0 0 440px; max-width:440px; }
/* page-explore.js parks this on the track while it sizes the opening slide,
   so the rail arrives already composed instead of animating itself together
   on load. It is removed a frame later and never returns. */
.jdv-hero__track.jdv-no-anim .jdv-feature,
.jdv-hero__track.jdv-no-anim .jdv-feature__media{ transition:none; }
.jdv-feature__media{
  position:relative; height:180px; border-radius:var(--jdv-radius-card);
  overflow:hidden;
  transition:height .32s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(135deg,#cdbfa6,#b7a98c);
  /* the renderer sets background-image inline; without these the featured
     image draws at natural size from the top-left corner, which is why hero
     thumbnails used to show a flat crop of one corner */
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.jdv-feature.is-focused .jdv-feature__media{ height:320px; }

/* The hero mixes post types whose featured images have nothing in common -
   video is 16:9 landscape, podcast is square, articles are mostly 3:4
   portrait - so no box shape holds all of them uncropped. `cover` was
   cutting ~37% off the peeks and a third off every portrait. `contain`
   fits each image whole and lets the card mat show around it instead.
   Only for real images: cards with no featured image keep the gradient
   placeholder above, which is meant to fill the box. */
.jdv-feature__media.jdv-has-image{
  background-size:contain;
  background-color:var(--jdv-cream);
}
.jdv-feature__media::after{ /* faux photo texture for placeholder */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.35), transparent 60%);
}
.jdv-feature__media.jdv-has-image::after{ display:none; }

/* Hover state for the image, per the design's image hover reference
   (title.org.uk/life-on-earth): the photo grows to 120% behind a frame that
   does not move, so the card crops into the picture rather than the picture
   pushing the card around.

   The photo is a background-image the renderer sets inline, and a background
   cannot be moved by transform - background-size is the only handle on it,
   and with `contain` there is no single value meaning "contain x 1.2" that
   holds for both the portrait and landscape images this rail mixes. So the
   paint is repeated on a ::before that inherits the same background-image
   and fills the box: scaling that layer scales the image inside it, and the
   media box's existing overflow:hidden crops it back to the frame. At rest
   the layer sits exactly over the copy the parent paints, so nothing is
   doubled; scaled up it covers that copy completely.

   Only .jdv-has-image gets the layer - cards with no featured image keep the
   gradient placeholder, which is meant to fill the box and has nothing to
   zoom. The badge and the tool buttons carry z-index:2 and stay above it. */
.jdv-feature__media.jdv-has-image::before{
  content:""; position:absolute; inset:0;
  background-image:inherit;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  transform:scale(1); transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}

/* Hovering anywhere on the card, not just the image: the underline on the
   title and the zoom are one hover state in the design, so they have to
   share one target or the card reacts differently depending on whether the
   pointer is over the picture or the words. */
.jdv-feature:hover .jdv-feature__media.jdv-has-image::before{ transform:scale(1.2); }
.jdv-feature__tools{ position:absolute; right:12px; bottom:12px; display:flex; gap:8px; z-index:2; }
.jdv-roundbtn{
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--jdv-ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.jdv-feature__body{ margin-top:12px; }
/* Scoped for the same reason as .jdv-card__title below: the title is an <h2>,
   and the kit's `.elementor-kit-8 h2` out-specifies a bare class. */
.jdv-explore .jdv-feature__title{
  font-family:var(--jdv-serif); font-weight:500; font-size:20px; line-height:1.2;
  margin:6px 0 12px;
}
/* hero slides are real links now that they render real posts */
.jdv-feature__link{ display:block; }
/* font:inherit - the Customizer's `:not(i,element-icon){font-family:Montserrat}`
   lands on the <a> itself, so without it the title rendered in Montserrat. */
.jdv-feature__title a{ font:inherit; color:inherit; text-decoration:none; }
.jdv-feature:hover .jdv-feature__title a,
.jdv-feature__title a:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* Corner label, not a floating pill: flush into the top-right of the visual
   with square corners, on the same soft beige as the tag pills below the
   card rather than pure white. */
.jdv-badge{
  position:absolute; top:0; right:0; z-index:2;
  background:#FDF8EC; color:var(--jdv-ink); font-size:12px; padding:4px 12px;
  border-radius:0;
}

.jdv-meta{ font-size:12px; color:var(--jdv-ink-soft); }

/* tags */
.jdv-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.jdv-tag{
  font-size:12px; color:var(--jdv-ink); background:var(--jdv-tag-bg);
  border-radius:6px; padding:5px 10px;
}
.jdv-tags--solid .jdv-tag{ background:var(--jdv-tag-bg-solid); }

/* hero controls */
.jdv-hero__controls{
  display:flex; align-items:center; justify-content:space-between; margin-top:26px;
}
.jdv-dots{ display:flex; gap:8px; }
.jdv-dots span{ width:7px; height:7px; border-radius:50%; background:#c7bca6; }
.jdv-dots span.is-active{ background:var(--jdv-ink); }

.jdv-arrows{ display:flex; gap:10px; }
.jdv-arrow{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--jdv-line);
  background:transparent; color:var(--jdv-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.jdv-arrow:hover{ background:rgba(0,0,0,.04); }

/* ---------- intro ---------- */
.jdv-intro{ padding:66px 0 44px; text-align:center; }
/* Scoped under .jdv-explore to out-specify the Elementor kit's global
   `.elementor-kit-8 h2` rule, which otherwise hijacks the font + size on
   any page where the kit CSS loads (e.g. staging). */
.jdv-explore .jdv-intro__title{
  /* font-family and weight are stated rather than left to the kit: the kit
     is the only reason this looks right today, and the moment its h2 rule
     changes this heading changes with it. 400 because IM Fell English ships
     one weight - 500 only asked the browser to synthesise a bolder one. */
  font-family:var(--jdv-display); font-weight:400;
  font-size:var(--jdv-h1); line-height:1.12; margin:0;
}
.jdv-intro__lead{
  font-size:14px; color:var(--jdv-ink-soft); margin:16px auto 0; max-width:560px; line-height:1.7;
}

.jdv-categories{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:40px;
  text-align:left;
}
.jdv-categories__label{ font-size:14px; color:var(--jdv-ink); }
/* Set from the rendered page, not from the comp. Scaling the comp put the
   column gap at ~36px (see the .jdv-pill note below), but at the real width
   that read far too loose, so 8px is the chosen value. Keep it - re-deriving
   it from the comp will land back on 36px and be wrong again. */
.jdv-categories__pills{ display:flex; flex-wrap:wrap; gap:10px 8px; flex:1; }

/* Outlined, not filled. An earlier pass read the comp as filling these; that
   was wrong, and re-measuring the Explore comp settles it: the pill interior
   samples at exactly the page background (252,248,236), so there is no fill
   at all - only an outline.

   Every number here is measured off that comp rather than judged by eye. The
   two images are at different scales, so each was normalised by the rendered
   width of the "Productivity & Technology" label (live 181px / comp 106px =
   1.708x). Height corroborates the factor: 25 comp px scales to 42.7, against
   39 measured live.

       h-padding   comp  7.0 px -> 12 px live   (was 20)
       gap         comp 21.5 px -> 37 px live   (was 10)

   The padding is used as measured. The gap is NOT: 37px was faithful to the
   comp but read far too loose on the real page, and the column gap is set to
   8px by eye instead - see .jdv-categories__pills above. The comp figure is
   left here only to explain why that override exists.

   Hover and selected stay dark-filled - the style guide's button states are
   light-by-default / dark-on-hover, and selected matches hover. */
.jdv-pill{
  font-family:var(--jdv-sans); font-size:14px; color:var(--jdv-ink);
  background:transparent; border:1px solid var(--jdv-line-strong); border-radius:999px;
  padding:11px 12px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.jdv-pill:hover{ background:var(--jdv-ink); color:#F4EFE3; border-color:var(--jdv-ink); }
.jdv-pill.is-active{ background:var(--jdv-ink); color:#F4EFE3; border-color:var(--jdv-ink); }

.jdv-filterbtn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--jdv-sans); font-size:13px; letter-spacing:.08em; font-weight:500;
  background:var(--jdv-ink); color:#F4EFE3; border:none; border-radius:999px;
  padding:12px 22px; cursor:pointer; margin-left:auto;
}
.jdv-filterbtn__icon{ display:inline-flex; }

/* ---------- rails ---------- */
.jdv-rail{ padding:34px 0; }
.jdv-rail--last{ padding-bottom:120px; }
.jdv-rail__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.jdv-rail__heading{ display:flex; align-items:center; gap:16px; }
/* Scoped for the usual reason - as a bare class this loses to
   `.elementor-kit-8 h2` (0,1,1), so "Watch" / "Listen" / "Read" have been
   rendering at the kit's 45px, not the 30px written here. The comp's H2 is
   40px, so that is what it takes now. */
.jdv-explore .jdv-rail__title{
  font-family:var(--jdv-display); font-weight:400; font-size:var(--jdv-h2); margin:0;
}
.jdv-explore-all{
  font-size:13px; color:var(--jdv-ink); background:#F3EBDB; border:1px solid var(--jdv-line);
  border-radius:999px; padding:7px 16px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.jdv-explore-all:hover{ background:var(--jdv-ink); color:#F4EFE3; border-color:var(--jdv-ink); }

.jdv-rail__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*22px)/4);
  gap:22px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:6px;
}
.jdv-rail__track::-webkit-scrollbar{ display:none; }

.jdv-card{ min-width:0; }
.jdv-card__media{
  position:relative; aspect-ratio:4/3; border-radius:var(--jdv-radius-card); overflow:hidden;
  background:linear-gradient(135deg,#cdbfa6,#b3a487);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  margin-bottom:12px;
}
/* Featured images are shown whole - never cropped. The library mixes 16:9
   video stills, square podcast covers and portrait article art, so no box
   shape holds all three edge to edge; `contain` fits each one entire and
   `repeat` fills whatever is left over. 4:3 is the box that leaves least to
   fill: ~12.5% for both 16:9 and square sources. Deliberately identical to
   the home page loop item (Elementor template #9028) so one upload spec
   covers both surfaces - do not change one without the other. */
.jdv-card__media.jdv-has-image{
  background-size:contain;
  background-repeat:repeat;
}
.jdv-card__media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.30), transparent 60%);
}
/* hide the faux placeholder texture once a real image is set */
.jdv-card__media.jdv-has-image::after{ display:none; }

/* Same 120% hover as the hero slides, by the same route: the photo is a
   background-image, so it is repainted on a ::before that inherits it and
   that layer is what scales, cropped by the media box's overflow:hidden.
   background-repeat has to be `repeat` here, matching the parent - these
   cards tile the image to fill the 4:3 box rather than matting it. */
.jdv-card__media.jdv-has-image::before{
  content:""; position:absolute; inset:0;
  background-image:inherit;
  background-size:contain; background-repeat:repeat; background-position:center;
  transform:scale(1); transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.jdv-explore .jdv-card:hover .jdv-card__media.jdv-has-image::before{ transform:scale(1.2); }
/* article placeholder variations */
.jdv-card__media--a{ background:linear-gradient(135deg,#e7e1d2,#cfc7b4); }
.jdv-card__media--b{ background:linear-gradient(135deg,#d7d4cd,#9a978f); }
.jdv-card__media--c{ background:linear-gradient(135deg,#e6ddcb,#cbbfa6); }
.jdv-card__media--d{ background:linear-gradient(135deg,#7d8b8f,#566066); }

/* course cards (Learn) */
.jdv-card__media--course{ display:flex; align-items:center; justify-content:center; }
.jdv-card__media--course::before{ content:""; position:absolute; inset:0; background:rgba(40,45,35,.25); z-index:1; }
.jdv-card__media--c1{ background:linear-gradient(135deg,#3f5a2e,#6f8a4a); }
.jdv-card__media--c2{ background:linear-gradient(135deg,#5c7a3c,#8fae5e); }
.jdv-card__media--c3{ background:linear-gradient(135deg,#8aa0c0,#c3cad6); }
.jdv-card__media--c4{ background:linear-gradient(135deg,#9a7d63,#6b5340); }
.jdv-course-title{
  position:relative; z-index:2; color:#F4EFE3; text-align:center;
  font-family:var(--jdv-serif); font-style:italic; font-weight:500; font-size:20px; line-height:1.2;
}

/* Scoped under .jdv-explore, and for the third time in this file it is the
   Elementor kit that makes the scope necessary. The title is an <h3>, and the
   kit's global `.elementor-kit-8 h3` (IM Fell English, 30px) out-specifies a
   bare .jdv-card__title (0,1,1) vs (0,1,0) - so the 19px written here has
   never once reached the screen. Every card on the Explore rails and on the
   Watch / Listen / Read archives has been rendering at the kit's 30px in the
   kit's face, which is what the design review measured. The size is the
   design's 24px; the face goes back to the one this component was written
   for. Unscope it and 30px returns. */
.jdv-explore .jdv-card__title{
  font-family:var(--jdv-serif); font-weight:500; font-size:24px; line-height:1.18;
  margin:6px 0 12px;
}
/* Real cards wrap the title in <a> for the permalink; the theme's global
   link styles otherwise override the serif font. Force the link to inherit
   the heading's typography so real cards match the static Learn cards. */
.jdv-card__title a{ font:inherit; color:inherit; letter-spacing:inherit; }

/* Hover: the title underlines, and nothing else moves. Same hover model as
   the hero slides - the target is the whole card, not the words, so the
   picture and the title are one thing to point at rather than two areas
   that behave differently. The rail cards and the Watch / Listen / Read
   archives share this component, so both get it from here.

   .jdv-explore a{ text-decoration:none } (0,1,1) is what these links are
   otherwise flattened by, hence the card in the selector: (0,3,1) clears it.
   The offset keeps the rule off the descenders in Cormorant at 24px. */
.jdv-explore .jdv-card:hover .jdv-card__title a,
.jdv-explore .jdv-card__title a:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* ===================== FILTER OVERLAY ===================== */
.jdv-filter{
  position:fixed; inset:0; z-index:1000;
  background:var(--jdv-green);
  font-family:var(--jdv-sans); color:var(--jdv-ink);
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
.jdv-filter[hidden]{ display:none; }
.jdv-filter.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

/* The panel is position:fixed at inset:0, so its top is the top of the
   viewport - underneath the site header, which the Customizer pins at
   z-index 1000001 and this overlay cannot rise above. At a flat 60px the
   close button opened up behind the nav. The content now starts below the
   header's real bottom edge, plus the design's own gap beneath it.

   --jdv-header-bottom is published by assets/js/mega-menu-links.js from
   getBoundingClientRect().bottom, so it already accounts for the admin bar
   and for the header growing when the webfont lands. The fallback is the
   80px the Customizer gives .site-header, for the case where that script
   is not on the page. */
.jdv-filter__inner{
  position:relative;
  padding-top:calc(var(--jdv-header-bottom, 80px) + 60px);
  padding-bottom:80px;
}
/* Sits flush with the content column: .jdv-filter__inner is itself a
   .jdv-container, so this offset is measured from its outer edge and has to
   be the same gutter the container pads with. */
.jdv-filterbtn--close{
  position:absolute;
  top:calc(var(--jdv-header-bottom, 80px) + 60px);
  right:var(--bs-gutter-x, .75rem);
}

.jdv-filter__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:72px;
  align-items:start;
}
/* Scoped, and with the family named rather than inherited - this one
   heading is hit by both of the page's cascade traps at once. It is an
   <h3>, so the Elementor kit's `.elementor-kit-8 h3` (IM Fell English,
   30px, 400) out-specifies a bare .jdv-filter__heading; and Customizer >
   Additional CSS carries `:not(i,element-icon){font-family:"Montserrat"}`,
   which matches the element directly and so beats the Inter that .jdv-filter
   passes down by inheritance. Neither the size nor the face written here has
   been reaching the screen. .jdv-filter .jdv-filter__heading is (0,2,0),
   which clears the kit, and naming the family closes the other one. */
.jdv-filter .jdv-filter__heading{
  font-family:var(--jdv-sans);
  font-size:16px;
  font-weight:600;
  margin:0 0 22px;
}
.jdv-filter__group{ display:flex; flex-direction:column; gap:14px; }

.jdv-fpill{
  font-family:var(--jdv-sans); font-size:16px; color:var(--jdv-ink);
  background:transparent; border:1.5px solid var(--jdv-green-line); border-radius:999px;
  padding:14px 18px; cursor:pointer; text-align:center; line-height:1.2;
  transition:background .18s ease, color .18s ease;
}
.jdv-fpill:hover{ background:rgba(92,81,66,.08); }
.jdv-fpill.is-selected{ background:var(--jdv-green-line); color:var(--jdv-green); border-color:var(--jdv-green-line); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .jdv-nav{ display:none; }                 /* nav collapses; hook burger to your menu */
  .jdv-burger{ display:flex; }
  .jdv-hero__inner{ grid-template-columns:1fr; gap:22px; }
  .jdv-explore .jdv-hero__title{ max-width:none; }  /* must match the scope above to win */
  .jdv-explore .jdv-intro__title{ font-size:44px; }
  .jdv-rail__track{ grid-auto-columns:calc((100% - 22px)/2); } /* 2 per view */
  .jdv-filter__cols{ grid-template-columns:repeat(2,1fr); gap:28px; }
}

@media (max-width:600px){
  .jdv-header__inner{ height:56px; }
  .jdv-btn--ghost{ display:none; }          /* keep header tidy on mobile */
  .jdv-intro{ padding:44px 0 32px; }
  .jdv-explore .jdv-intro__title{ font-size:34px; }
  .jdv-intro__title br{ display:none; }
  .jdv-intro__lead br{ display:none; }
  .jdv-categories{ flex-direction:column; align-items:stretch; gap:14px; }
  .jdv-filterbtn{ margin-left:0; align-self:flex-start; }
  .jdv-explore .jdv-rail__title{ font-size:32px; }  /* must match the scope above to win */
  .jdv-rail__track{ grid-auto-columns:78%; }  /* 1+peek per view */
  /* no room for the focus/peek split on a phone - one full-size card per
     view, so every slide keeps the focused proportions */
  .jdv-feature,
  .jdv-feature.is-focused{ flex:0 0 80%; max-width:80%; }
  .jdv-feature__media,
  .jdv-feature.is-focused .jdv-feature__media{ height:220px; }

  /* Mobile comp: hero is one full-width card, arrows either side of the
     dots, and a smaller title. Sizes scaled off the comp to a 390px phone. */
  .jdv-hero{ padding:24px 0 40px; }
  .jdv-explore .jdv-hero__title{ font-size:32px; line-height:1.12; margin:0; }
  .jdv-feature,
  .jdv-feature.is-focused{ flex:0 0 100%; max-width:100%; }
  .jdv-feature__media,
  .jdv-feature.is-focused .jdv-feature__media{ height:260px; }
  .jdv-hero__controls{ margin-top:32px; }
  .jdv-hero__controls .jdv-arrows{ display:contents; }
  .jdv-hero__controls [data-rail-prev]{ order:-1; }
  .jdv-hero__controls [data-rail-next]{ order:1; }
  .jdv-hero__controls .jdv-arrow{ width:32px; height:32px; }
  /* The mobile comp sets the card title in the heading face, regular weight;
     20px is the size at which its first line fills the card as it does there. */
  .jdv-explore .jdv-feature__title{ font-family:var(--jdv-display); font-weight:400; font-size:20px; line-height:1.3; }

  /* The comp drops the category pills on phones - FILTER alone, full width.
     Categories are still reachable inside the filter overlay. */
  .jdv-explore .jdv-intro__title{ font-size:32px; }
  .jdv-categories{ margin-top:24px; }
  .jdv-categories__label,
  .jdv-categories__pills{ display:none; }
  .jdv-intro .jdv-filterbtn{ align-self:stretch; justify-content:center; padding:11px 22px; }

  /* Rail head: title left, Explore all right; the rails swipe, so no arrows. */
  .jdv-rail__heading{ flex:1; justify-content:space-between; }
  .jdv-rail__head .jdv-arrows{ display:none; }
  .jdv-filter__cols{ grid-template-columns:1fr; gap:30px; margin-top:84px; }
  .jdv-filterbtn--close{ top:calc(var(--jdv-header-bottom, 64px) + 24px); }
  .jdv-filter__inner{ padding-top:calc(var(--jdv-header-bottom, 64px) + 24px); }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .jdv-filter{ transition:opacity .01s linear; transform:none; }
  .jdv-hero__track, .jdv-rail__track{ scroll-behavior:auto; }
  /* Focus sizing goes back to an instant swap. page-explore.js reads these
     durations rather than assuming .32s, so its rail-pinning shortens to
     match here on its own. */
  .jdv-feature{ transition:flex-basis .01s linear, max-width .01s linear; }
  .jdv-feature__media{ transition:height .01s linear; }
  .jdv-feature__media.jdv-has-image::before,
  .jdv-card__media.jdv-has-image::before{ transition:none; }
}