/* Vedere Post Slider — defensively scoped so host-theme global styles
   (headings, links, buttons) cannot bleed in and override typography,
   color, or the dot controls. */
.vedere-post-slider,
.vedere-post-slider *{box-sizing:border-box}
.vedere-post-slider{width:100%;--border:#999;--text:#111}
.vedere-post-slider__viewport{width:100%;overflow:hidden}
.vedere-post-slider__track{display:flex;width:100%;transition:transform .45s ease}
/* Dividers: rather than a `border` on every card (fragile — themes commonly
   reset/override border properties globally, and per-cell nth-child border
   logic breaks differently at every breakpoint), the slide itself is given
   the divider color as its background and a 1px grid `gap`. Each card is
   opaque white, so the 1px gap between cards shows the slide's background
   color through as a thin line — both directions, automatically, with zero
   nth-child bookkeeping. This is a background-color technique, not a
   border, so it isn't a target for theme "reset all borders" rules either. */
.vedere-post-slider__slide{
  flex:0 0 100%;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.vedere-post-slider__card{
  position:relative;
  min-width:0;
  min-height:320px;
  background:#fff;
}


/* Link reset — theme's global `a { color: ...; text-decoration: ... }`
   rules are very commonly higher-specificity or loaded later, so these
   are locked down explicitly rather than relying on `inherit`. */
.vedere-post-slider__link{display:block;height:100%;color:var(--text)!important;text-decoration:none!important;background:transparent!important;outline:none!important}
.vedere-post-slider__link,
.vedere-post-slider__link img{outline:none!important}
.vedere-post-slider__link:hover,
.vedere-post-slider__link:focus,
.vedere-post-slider__link:visited{color:var(--text)!important;text-decoration:none!important;outline:none!important}
/* Default browser focus rings render in the theme/browser accent color
   (that's the blue box you saw around a card's image) and don't respect
   our layout. Replace with a deliberate, on-brand indicator so keyboard
   users still get a visible focus state without the mismatched color. */
.vedere-post-slider__link:focus-visible{outline:2px solid #111!important;outline-offset:-2px!important}

.vedere-post-slider__content{height:100%;min-height:320px;padding:18px 16px 16px;display:flex;flex-direction:column;background:#fff;transition:background-color .25s ease}

/* Title / year — theme stylesheets almost always target bare `h3`/`h4`
   selectors with their own font-family, color and margin. Those rules
   frequently win on specificity or load order, which is why titles were
   rendering in the theme's heading color/typeface instead of Inter. The
   !important guards below make this component's typography authoritative
   regardless of where it's dropped in a page. */
.vedere-post-slider__title{
  margin:0!important;
  padding:0!important;
  color:var(--text)!important;
  font-family:'Inter',Arial,Helvetica,sans-serif!important;
  font-size:clamp(15px,2.6vw,28px)!important;
  font-weight:300!important;
  font-style:normal!important;
  line-height:126%!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transition:color .25s ease;
}
.vedere-post-slider__year{
  margin:30px 0 8px!important;
  padding:0!important;
  color:var(--text)!important;
  font-family:'Inter',Arial,Helvetica,sans-serif!important;
  font-size:clamp(24px,4.4vw,48px)!important;
  font-weight:600!important;
  font-style:normal!important;
  line-height:126%!important;
  letter-spacing:0!important;
  transition:color .25s ease;
}

.vedere-post-slider__image{width:100%;margin-top:auto;overflow:hidden}
.vedere-post-slider__image img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1.4/1;object-fit:cover;transition:transform .4s ease;margin:0!important;border:0!important;box-shadow:none!important}
.vedere-post-slider__image--empty{aspect-ratio:1.4/1;background:#eee}

/* ==========================================================
   ACTIVE STATE — mouse hover, keyboard (Tab) focus, click/tap
   and touch press — all set as .is-active by slider.js.
   Applies on ALL screen sizes. Background and text colour are always
   changed together, so the card can never be black with black text.
========================================================== */
.vedere-post-slider__card:not(.vedere-post-slider__card--empty):has(.vedere-post-slider__link:focus-visible),
.vedere-post-slider__card:not(.vedere-post-slider__card--empty).is-active{z-index:2;box-shadow:none}
.vedere-post-slider__card:not(.vedere-post-slider__card--empty):has(.vedere-post-slider__link:focus-visible) .vedere-post-slider__content,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty).is-active .vedere-post-slider__content{background:#000;border-color:#000}
.vedere-post-slider__card:not(.vedere-post-slider__card--empty):has(.vedere-post-slider__link:focus-visible) .vedere-post-slider__link,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty).is-active .vedere-post-slider__link,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty):has(.vedere-post-slider__link:focus-visible) .vedere-post-slider__title,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty).is-active .vedere-post-slider__title,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty):has(.vedere-post-slider__link:focus-visible) .vedere-post-slider__year,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty).is-active .vedere-post-slider__year{color:#fff!important}
.vedere-post-slider__card:not(.vedere-post-slider__card--empty):has(.vedere-post-slider__link:focus-visible)::after,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty).is-active::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  top:auto!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:linear-gradient(135deg,transparent 50%,#000 50%)!important;
  box-shadow:none!important;
  opacity:1!important;
  z-index:3!important;
  pointer-events:none!important;
}
.vedere-post-slider__link{-webkit-tap-highlight-color:transparent}

/* No-JS fallback for real mouse hover. With JS running, slider.js paints the
   colours inline, so this can never produce a mismatched state. */
@media (hover:hover) and (pointer:fine){
  .vedere-post-slider__card:not(.vedere-post-slider__card--empty):hover .vedere-post-slider__content{background:#000}
  .vedere-post-slider__card:not(.vedere-post-slider__card--empty):hover .vedere-post-slider__title,
  .vedere-post-slider__card:not(.vedere-post-slider__card--empty):hover .vedere-post-slider__year{color:#fff!important}
  .vedere-post-slider__card:not(.vedere-post-slider__card--empty):hover img,
  .vedere-post-slider__card.is-active img{transform:scale(1.02)}
}

/* Dots — reset to plain circles. Theme stylesheets commonly style every
   <button> with a border/box-shadow/outline in the brand accent color
   (that's the pink square outline you saw). -webkit-appearance:none plus
   explicit border/background/outline:none removes all of that, and the
   focus ring is redrawn manually as a round box-shadow so it still
   follows a circle for keyboard users instead of defaulting to a
   theme-colored square. */
.vedere-post-slider__dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;padding:0!important;list-style:none!important}
.vedere-post-slider__dot{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:9px;
  height:9px;
  min-width:9px;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#ccc!important;
  outline:none!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.vedere-post-slider__dot.is-active{background:#111!important}
.vedere-post-slider__dot:focus-visible{box-shadow:0 0 0 3px rgba(17,17,17,.35)!important}

@media (min-width:481px) and (max-width:1024px){
  /* Reference keeps three columns on mid-size/tablet layouts. Typography
     scales continuously with viewport width instead of jumping to a much
     smaller fixed tablet size. */
  .vedere-post-slider__content{min-height:0;padding:12px 10px 12px}
  .vedere-post-slider__card{min-height:0}
  .vedere-post-slider__year{margin-top:20px!important;margin-bottom:8px!important}
}

@media (max-width:480px){
  /* Reference switches to two columns only on narrow/mobile screens. The
     gap/background divider technique above needs zero changes here — it
     automatically re-flows to 2 columns with correct dividers, unlike the
     old border-per-card approach which needed separate nth-child rules at
     every breakpoint (and was the recurring source of border bugs). */
  .vedere-post-slider__slide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vedere-post-slider__card{min-height:0}
  .vedere-post-slider__content{min-height:0;padding:8px 7px 10px}
  .vedere-post-slider__title{font-size:clamp(13px,3.3vw,15px)!important;font-weight:300!important;line-height:1.18!important}
  .vedere-post-slider__year{font-size:clamp(18px,5.8vw,24px)!important;font-weight:600!important;line-height:1.1!important;margin-top:17px!important;margin-bottom:7px!important}
  .vedere-post-slider__image img,
  .vedere-post-slider__image--empty{aspect-ratio:1.4/1}
  .vedere-post-slider__dots{margin-top:18px}
  .vedere-post-slider__dot{width:7px;height:7px;min-width:7px}
}

.vedere-post-slider a:focus,
.vedere-post-slider a:active {
    outline:none !important;
}

/* ==========================================
   Restore clickable cursor on post cards
========================================== */

.vedere-post-slider .swiper-slide,
.vedere-post-slider .slick-slide,
.vedere-post-slider .post-card,
.vedere-post-slider a,
.vedere-post-slider__card:not(.vedere-post-slider__card--empty) {
    cursor: pointer !important;
}

/* No post in this slot: keep the default cursor, no clickable affordance. */
.vedere-post-slider__card--empty {
    cursor: default !important;
}