/* ============================================================================
   TBL Medical — small additions on top of the VIO design system.
   Reuses vio-system / vio-blocks / vio-page. Only new layout pieces here.
   ========================================================================== */

/* Logo wordmark (TBL medical clinique) in the VIO serif style */
.tbl-logo .vio-logo__mark{font-family:var(--wp--preset--font-family--cormorant-garamond);font-weight:500;font-size:34px;letter-spacing:.14em}
.tbl-logo .vio-logo__sub{font-size:9px;line-height:1.1;letter-spacing:.14em}

/* Utility top bar (email / phone / location) above the header */
.tbl-topbar{background:var(--wp--preset--color--vio-ink);color:var(--wp--preset--color--vio-lotion)}
.tbl-topbar__inner{max-width:1360px;margin-inline:auto;display:flex;gap:28px;align-items:center;padding:9px 40px;font-size:13px;letter-spacing:.02em}
.tbl-topbar a{color:inherit;text-decoration:none;opacity:.85;display:inline-flex;gap:7px;align-items:center}
.tbl-topbar a:hover{opacity:1}
.tbl-topbar__spacer{margin-left:auto}
@media (max-width:768px){.tbl-topbar__inner{padding:8px 20px;gap:16px;font-size:12px;overflow-x:auto;white-space:nowrap}.tbl-topbar__hide-sm{display:none}}

/* Hero <img> fill */
.vio-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Popular treatments — grid of overlay cards (reuses featured-categories card look) */
.tbl-treatments__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tbl-tcard{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;display:block;text-decoration:none;color:var(--wp--preset--color--vio-lotion)}
.tbl-tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tbl-tcard:hover img{transform:scale(1.05)}
.tbl-tcard__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:28px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 85%)}
.tbl-tcard__eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin:0}
.tbl-tcard__title{font-family:var(--wp--preset--font-family--cormorant-garamond);font-weight:400;font-size:30px;line-height:1.1;margin:0;color:var(--wp--preset--color--vio-lotion)}
.tbl-tcard__lead{font-size:14px;line-height:1.45;opacity:.9;margin:0}
.tbl-tcard__more{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:4px;position:relative;padding-bottom:3px;width:fit-content}
.tbl-tcard__more::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor}
@media (max-width:900px){.tbl-treatments__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tbl-treatments__grid{grid-template-columns:1fr}}

/* Latest news — 3 blog cards (reuses the social split position) */
.tbl-news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.tbl-newscard{display:block;text-decoration:none;color:inherit}
.tbl-newscard__media{aspect-ratio:3/2;border-radius:3px;overflow:hidden;margin-bottom:16px}
.tbl-newscard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tbl-newscard:hover .tbl-newscard__media img{transform:scale(1.04)}
.tbl-newscard__date{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:0 0 6px}
.tbl-newscard__title{font-family:var(--wp--preset--font-family--cormorant-garamond);font-weight:400;font-size:24px;line-height:1.2;margin:0}
@media (max-width:820px){.tbl-news__grid{grid-template-columns:1fr;gap:20px}}

/* Media CTA band uses a real image */
.vio-media-cta__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── STICKY-KOLONNE: popular treatments (hover-zoom + klik-gradient) ──────── */
.tbl-sticky{display:grid;grid-template-columns:0.85fr 1.15fr;gap:4.5rem;align-items:start}
.tbl-sticky__intro{position:sticky;top:120px}
.tbl-sticky__col{display:flex;flex-direction:column;gap:20px}
.tbl-win-item{border-radius:3px;overflow:hidden;background:var(--wp--preset--color--vio-ink)}
.tbl-win{position:relative;overflow:hidden;height:290px;cursor:pointer}
.tbl-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.25,1,.5,1),filter .6s;filter:brightness(.72) saturate(.92)}
/* den lille zoom ved hover (+ i åben tilstand) */
.tbl-win.is-open img,.tbl-win:hover img{transform:scale(1.05);filter:brightness(.86) saturate(1)}
.tbl-win__veil{position:absolute;inset:0;transition:background .6s ease;
  background:linear-gradient(to top,rgba(26,22,20,.85) 0%,rgba(26,22,20,.25) 55%,transparent 100%)}
/* gradient-farven der lyser op ved klik — TBL's varme taupe */
.tbl-win.is-open .tbl-win__veil{
  background:linear-gradient(to top,rgba(92,74,58,.92) 0%,rgba(178,157,146,.4) 55%,transparent 100%)}
.tbl-win__body{position:absolute;inset:0;padding:1.8rem 2rem;display:flex;flex-direction:column;
  justify-content:flex-end;color:var(--wp--preset--color--vio-lotion)}
.tbl-win__eyebrow{margin:0 0 .5rem;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
.tbl-win__title{margin:0;font-family:var(--wp--preset--font-family--cormorant-garamond);font-weight:400;
  font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1;color:var(--wp--preset--color--vio-lotion)}
.tbl-win__arrow{position:absolute;top:1.5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(254,255,249,.3);display:flex;align-items:center;justify-content:center;
  color:rgba(254,255,249,.7);transition:all .5s cubic-bezier(.65,0,.35,1)}
.tbl-win__arrow svg{width:14px;height:14px;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.tbl-win.is-open .tbl-win__arrow{background:var(--wp--preset--color--vio-lotion);
  border-color:var(--wp--preset--color--vio-lotion);color:var(--wp--preset--color--vio-ink)}
.tbl-win.is-open .tbl-win__arrow svg{transform:rotate(45deg)}
.tbl-win__indicator{position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--wp--preset--color--vio-mouse);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.25,1,.5,1)}
.tbl-win.is-open .tbl-win__indicator{transform:scaleX(1)}
/* panel der folder ud inline under vinduet */
.tbl-win-panel{display:grid;grid-template-rows:0fr;background:var(--wp--preset--color--vio-lotion);
  transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1)}
.tbl-win-panel.is-open{grid-template-rows:1fr}
.tbl-win-panel__inner{overflow:hidden;min-height:0}
.tbl-win-panel__content{padding:1.8rem 2rem;opacity:0;transform:translateY(-8px);
  transition:opacity .5s ease .1s,transform .5s ease .06s;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.tbl-win-panel.is-open .tbl-win-panel__content{opacity:1;transform:none}
.tbl-win-panel__content p{margin:0;font-size:15px;line-height:1.6;color:var(--wp--preset--color--vio-ink)}
@media (max-width:900px){
  .tbl-sticky{grid-template-columns:1fr;gap:32px}
  .tbl-sticky__intro{position:static}
  .tbl-win{height:240px}
}

/* Quiz-hero + fifty-fifty use real images */
.vio-quiz-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vio-fifty-fifty__media img{width:100%;height:100%;object-fit:cover;display:block}
.vio-featured-categories__image img{width:100%;height:100%;object-fit:cover;display:block}
.vio-featured-categories__media{position:relative}