/* ============================================================================
   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}

/* 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}