/* Avenues front-end styles for code-defined templates.
   Tokens are global (:root). All component styles are scoped under .av-doctor so they
   never collide with the theme or the Elementor header/footer. Reused sections can be
   promoted to shared scopes as more templates are added. */

:root{
  --brand-sun:#FCD841; --brand-green:#618465; --brand-white:#FFFFFF; --brand-ember:#F66C5E;
  --sun-50:#FEF9E3; --sun-100:#FDF1BE; --sun-200:#FCE88F; --sun-500:#EFC61F;
  --grey-50:#F6F7F8; --grey-100:#ECEEF0; --grey-300:#B4BBC1; --grey-500:#6C737B; --grey-600:#555A61; --grey-700:#43474D; --grey-900:#1C1E21;
  --green-50:#EEF3EE; --green-200:#AEC6B0; --green-400:#618465; --green-600:#3D5641;
  --price:#B32D1E;
  --price-text:#B32D1E;
  --measure:65ch;
  --section-y:2rem;      /* band padding, phone */
  --section-y-lg:1.875rem; /* band padding, desktop */
  --font-display:"Josefin Sans","Century Gothic",Futura,sans-serif;
  --font-body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(28,30,33,.06); --shadow-sm:0 2px 6px rgba(28,30,33,.07);
  --shadow-md:0 8px 24px rgba(28,30,33,.09); --shadow-lg:0 18px 48px rgba(28,30,33,.12);
  --shadow-sun:0 12px 32px rgba(252,216,65,.35); --shadow-green:0 12px 32px rgba(97,132,101,.28);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-base:200ms;
  --av-wrap:1160px;
}

.av-doctor{font-family:var(--font-body);color:var(--grey-700);line-height:1.55;background:#FFFFFF;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.av-doctor *{box-sizing:border-box}
.av-doctor img{max-width:100%;display:block}
.av-doctor h1,.av-doctor h2,.av-doctor h3,.av-doctor h4{font-family:var(--font-display);color:var(--grey-900);line-height:1.15;font-weight:600;margin:0;text-wrap:balance}
.av-doctor p{margin:0;text-wrap:pretty}
.av-doctor a{color:var(--green-600);text-decoration:none}
.av-doctor .wrap{max-width:var(--av-wrap);margin-inline:auto;padding-inline:24px}
.av-doctor .wrap.narrow{max-width:760px}
.av-doctor .eyebrow{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-green);display:inline-block}
.av-doctor .btn{font-family:var(--font-body);font-weight:500;font-size:.9375rem;letter-spacing:.02em;border:none;border-radius:var(--radius-pill);padding:11px 24px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:all var(--dur-base) var(--ease-out);text-decoration:none}
.av-doctor .btn svg{width:18px;height:18px}
.av-doctor .btn-primary{background:var(--brand-sun);color:var(--grey-900);box-shadow:var(--shadow-sun)}
.av-doctor .btn-primary:hover{background:var(--brand-green);color:var(--brand-white);transform:translateY(-2px)}
.av-doctor .btn-ghost{background:transparent;color:var(--grey-700);box-shadow:inset 0 0 0 1.5px var(--grey-300)}
.av-doctor .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand-green);color:var(--brand-green)}

/* hero */
.av-doctor .hero{background:#FFFFFF;position:relative;overflow:hidden}
.av-doctor .hero .wrap{position:relative;z-index:1;display:grid;gap:28px;padding-block:32px 36px}
@media(min-width:900px){.av-doctor .hero .wrap{grid-template-columns:1.05fr .95fr;gap:44px;padding-block:48px;align-items:center}}
.av-doctor .hero h1{font-size:clamp(1.875rem,4.4vw,2.75rem);letter-spacing:-.01em;margin:6px 0 4px}
.av-doctor .hero .creds{font-family:var(--font-body);color:var(--grey-600);font-size:var(--fs-body,.875rem);font-weight:500;margin-bottom:14px}
.av-doctor .hero .lead{font-size:var(--fs-lead,.875rem);color:var(--grey-700);max-width:var(--measure);margin-bottom:20px}
.av-doctor .hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.av-doctor .blob{display:none}
.av-doctor .blob.y{width:360px;height:360px;background:var(--sun-200);top:-140px;right:-80px}
.av-doctor .blob.g{width:280px;height:280px;background:var(--green-200);bottom:-140px;left:-120px}
.av-doctor .portrait{position:relative}
.av-doctor .portrait{max-width:400px;margin-inline:auto}
.av-doctor .portrait .frame{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:4/5;background:var(--grey-50);display:grid;place-items:center;overflow:hidden}
.av-doctor .portrait .frame img{width:100%;height:100%;object-fit:cover}
.av-doctor .portrait .frame svg{width:55%;height:55%;color:var(--green-400);opacity:.4}
.av-doctor .portrait .badge{position:absolute;left:-14px;bottom:-18px;background:#FFFFFF;border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:12px 18px;display:flex;align-items:center;gap:12px}
.av-doctor .portrait .badge .n{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--brand-green);line-height:1}
.av-doctor .portrait .badge .l{font-size:.78rem;color:var(--grey-600);max-width:13ch;line-height:1.25}
@media(max-width:600px){.av-doctor .portrait .badge{left:50%;transform:translateX(-50%)}}

/* quick facts */
.av-doctor .facts-outer{padding-block:24px}
.av-doctor .facts .wrap{display:grid;grid-template-columns:1fr;gap:1px;background:var(--grey-100);border:1px solid var(--grey-100);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:700px){.av-doctor .facts .wrap{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}}
.av-doctor .fact{background:#FFFFFF;padding:14px 18px}
.av-doctor .fact .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-500);font-weight:600;margin-bottom:6px}
.av-doctor .fact .v{font-family:var(--font-display);font-size:1.0625rem;color:var(--grey-900);font-weight:600;line-height:1.25}

/* sections */
.av-doctor .block{padding-block:var(--section-y)}
@media(min-width:900px){.av-doctor .block{padding-block:var(--section-y-lg)}}
.av-doctor .block.tint{background:var(--grey-50)}
/* no pastel washes: "soft" is a neutral grey tint */
.av-doctor .block.soft{background:var(--grey-50)}
/* bold full-strength brand band (deep green, white text) */
.av-doctor .block.brand-green{background:var(--green-600)}
.av-doctor .block.brand-green .eyebrow{color:var(--brand-sun)}
.av-doctor .block.brand-green h2,.av-doctor .block.brand-green .pullquote{color:var(--brand-white)}
.av-doctor .block.brand-green .pullquote .mark{color:var(--brand-sun)}
.av-doctor .block.brand-green .section-head p{color:rgba(255,250,250,.82)}
.av-doctor .block.brand-green .video{box-shadow:0 0 0 1px rgba(255,255,255,.16),var(--shadow-md)}
/* bold full-strength brand band (bright sun, dark text) */
.av-doctor .block.brand-sun{background:var(--brand-sun)}
.av-doctor .block.brand-sun .eyebrow{color:var(--green-600)}
.av-doctor .block.brand-sun h2{color:var(--grey-900)}
.av-doctor .block.brand-sun .section-head p{color:rgba(28,30,33,.72)}
.av-doctor .section-head{max-width:var(--measure);margin-bottom:22px}
.av-doctor .section-head h2{font-size:clamp(1.5rem,3.4vw,1.875rem);margin-bottom:8px}
.av-doctor .section-head p{color:var(--grey-600);font-size:var(--fs-body,.875rem)}

/* about */
.av-doctor .about-grid{display:grid;gap:24px}
@media(min-width:900px){.av-doctor .about-grid{grid-template-columns:1fr 1fr;gap:44px;align-items:start}}
.av-doctor .about-grid .q{font-family:var(--font-display);font-size:1.25rem;color:var(--grey-900);font-weight:600;line-height:1.3}
.av-doctor .about-grid .body p{margin-bottom:12px;color:var(--grey-700);max-width:var(--measure)}

/* right fit */
.av-doctor .rf-cols{display:grid;gap:14px}
@media(min-width:720px){.av-doctor .rf-cols{grid-template-columns:1fr 1fr;gap:14px 28px}}
.av-doctor .rf{display:flex;gap:12px;align-items:flex-start;background:#FFFFFF;border:1px solid var(--grey-100);border-radius:var(--radius-md);padding:13px 16px;box-shadow:var(--shadow-xs)}
.av-doctor .rf svg{width:22px;height:22px;color:var(--brand-green);flex-shrink:0;margin-top:2px}
.av-doctor .rf span{font-size:var(--fs-body,.875rem);color:var(--grey-700)}

/* tags */
.av-doctor .tags{display:flex;flex-wrap:wrap;gap:8px}
.av-doctor .tagchip{font-family:var(--font-body);font-size:.875rem;font-weight:500;color:var(--green-600);background:#FFFFFF;border:1px solid var(--green-200);border-radius:var(--radius-pill);padding:7px 14px}

/* words / video */
.av-doctor .words-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.av-doctor .words-grid{grid-template-columns:1fr 1fr;gap:44px}}
.av-doctor .pullquote{font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.625rem);color:var(--grey-900);font-weight:600;line-height:1.32}
.av-doctor .pullquote .mark{color:var(--brand-sun);font-size:1.4em;line-height:0;vertical-align:-.25em;margin-right:.1em}
.av-doctor .video{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(150deg,var(--green-400),var(--green-600));box-shadow:var(--shadow-md);display:grid;place-items:center}
.av-doctor .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.av-doctor .video .play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:var(--shadow-md)}
.av-doctor .video .play svg{width:26px;height:26px;color:var(--green-600);margin-left:4px}
.av-doctor .video .cap{position:absolute;bottom:16px;left:18px;color:#fff;font-size:.85rem;opacity:.85}

/* background */
.av-doctor .bg-grid{display:grid;gap:28px}
@media(min-width:900px){.av-doctor .bg-grid{grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}}
.av-doctor .bg-body p{margin-bottom:12px;color:var(--grey-700);max-width:var(--measure)}
.av-doctor .reslist{list-style:none;padding:0;margin:6px 0 20px;display:grid;gap:7px}
.av-doctor .reslist li{display:flex;gap:12px;align-items:center;color:var(--grey-700)}
.av-doctor .reslist .dot{width:9px;height:9px;border-radius:50%;background:var(--brand-green);flex-shrink:0}
.av-doctor .memb-head{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-500);font-weight:600;margin-bottom:14px}
.av-doctor .memb{display:flex;flex-wrap:wrap;gap:10px}
.av-doctor .memb .m{font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--grey-700);background:#FFFFFF;border:1px solid var(--grey-300);border-radius:var(--radius-pill);padding:6px 14px}
.av-doctor .bg-photo{border-radius:var(--radius-lg);aspect-ratio:1/1;background:linear-gradient(160deg,var(--grey-100),var(--grey-50));box-shadow:var(--shadow-sm);display:grid;place-items:center;overflow:hidden}
.av-doctor .bg-photo img{width:100%;height:100%;object-fit:cover}
.av-doctor .bg-photo svg{width:42%;height:42%;color:var(--grey-300)}

/* CTA */
.av-doctor .cta{background:var(--brand-sun);position:relative;overflow:hidden}
.av-doctor .cta .wrap{position:relative;z-index:1;text-align:center;padding-block:44px}
.av-doctor .cta h2{font-size:clamp(1.5rem,3.4vw,2rem);color:var(--grey-900);margin-bottom:8px}
.av-doctor .cta p{color:var(--grey-900);opacity:.85;margin:0 auto 20px;font-size:var(--fs-body,.875rem);max-width:var(--measure)}
.av-doctor .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.av-doctor .cta .loc{margin-top:14px;font-size:.85rem;color:var(--grey-900);opacity:.7}
.av-doctor .cta .shape{position:absolute;border-radius:50%;background:rgba(255,255,255,.28)}
.av-doctor .cta .shape.a{width:260px;height:260px;top:-110px;right:-40px}
.av-doctor .cta .shape.b{width:180px;height:180px;bottom:-90px;left:8%}

/* team */
/* mobile-first: the team row is a horizontal swipe (scroll-snap) on phones, a grid from 560px */
.av-doctor .team-grid{display:grid;gap:16px;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.av-doctor .team-grid > *{scroll-snap-align:start}
@media(min-width:560px){.av-doctor .team-grid{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;gap:16px;grid-template-columns:1fr 1fr}}
@media(min-width:960px){.av-doctor .team-grid{grid-template-columns:repeat(4,1fr)}}
.av-doctor .tcard{background:#FFFFFF;border:1px solid var(--grey-100);border-radius:var(--radius-md);padding:16px;text-align:left;box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);color:inherit;display:block}
.av-doctor .tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
/* Square, like every other doctor image on the site. A round 72px avatar here was the only
   place headshots were treated differently, and it made the cards read as a separate component
   rather than the same one. */
.av-doctor .tcard .av{width:100%;aspect-ratio:4/3;height:auto;border-radius:var(--radius-sm);margin:0 0 12px;background:var(--grey-100);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--green-600);overflow:hidden}
.av-doctor .tcard .av img{width:100%;height:100%;object-fit:cover}
.av-doctor .tcard h3{font-size:1rem;margin-bottom:2px}
.av-doctor .tcard .role{font-size:.85rem;color:var(--grey-600)}

@media(prefers-reduced-motion:reduce){.av-doctor *{transition:none!important}}

/* Contrast (AA): section labels use the deep green on light backgrounds. */
.av-doctor .eyebrow{color:var(--green-600)}
.av-doctor .block.brand-sun .eyebrow{color:var(--green-600)}


/* ============================================================== section controls
   The doctor template's half of the per-section layout choices (inc/section-controls.php).
   It lives here rather than in avenues-templates.css because that file is not loaded on
   .av-doctor pages. Same rules, same class names; nothing applies until a class is set. */
.av-doctor .is-space-compact{--section-y:1.15rem;--section-y-lg:1.15rem}
.av-doctor .is-space-roomy{--section-y:3rem;--section-y-lg:3.25rem}
.av-doctor .cta.is-space-compact > .wrap{padding-block:28px}
.av-doctor .cta.is-space-roomy > .wrap{padding-block:64px}

@media(min-width:760px){
	.av-doctor [data-av-section].is-cols-2 .team-grid,
	.av-doctor [data-av-section].is-cols-2 .rf-cols,
	.av-doctor [data-av-section].is-cols-3 .team-grid,
	.av-doctor [data-av-section].is-cols-3 .rf-cols,
	.av-doctor [data-av-section].is-cols-4 .team-grid,
	.av-doctor [data-av-section].is-cols-4 .rf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:960px){
	.av-doctor [data-av-section].is-cols-3 .team-grid,
	.av-doctor [data-av-section].is-cols-3 .rf-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
	.av-doctor [data-av-section].is-cols-4 .team-grid,
	.av-doctor [data-av-section].is-cols-4 .rf-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(min-width:900px){
	.av-doctor .is-img-left .words-grid > .pullquote{order:2}
	.av-doctor .is-img-left .words-grid > .video{order:1}
	.av-doctor .is-img-left .bg-grid{grid-template-columns:.9fr 1.1fr}
	.av-doctor .is-img-left .bg-grid > .bg-body{order:2}
	.av-doctor .is-img-left .bg-grid > .bg-photo{order:1}
}

/* The heading says each clinician brings a different strength, so the card shows it: up to
   three areas of expertise, as quiet chips under the role. */
.av-doctor .tcard-skills{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.av-doctor .tcard-skills li{font-size:.72rem;line-height:1.3;padding:3px 8px;border-radius:var(--radius-pill);background:var(--brand-sun);color:var(--grey-900);font-weight:600}
.av-doctor .team-grid .tcard h3{font-size:1rem;margin:0}
.av-doctor .tcard .role{font-size:.8125rem;color:var(--ink-2,#4D5A50);margin-top:2px}

/* A partner's card leaves the site, so it says so rather than being a link with no sign of it. */
.av-tpl .lcard-external{display:flex;flex-direction:column}
.av-tpl .lcard-external .lcard-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;color:var(--green-600)}
.av-tpl .lcard-external .lcard-go svg{width:14px;height:14px}
.av-tpl .lcard-external:hover .lcard-go{text-decoration:underline}


/* ---- doctor cards: Learn more + Book now ------------------------------ */
/* Our own doctors have both a profile and a booking page, and two destinations cannot live in
   one <a>. The card is a plain element, its title carries the profile link and stretches over
   the whole card, and "Book now" sits above that overlay with its own destination. */
.av-tpl .lcard-split{position:relative}
.av-tpl .lcard-split:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.av-tpl .lcard-split:has(.lcard-title-link:focus-visible){outline:3px solid var(--focus-ring,var(--brand-green));outline-offset:3px}
.av-tpl .lcard-title-link{color:inherit;text-decoration:none}
.av-tpl .lcard-title-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.av-tpl .lcard-title-link:focus-visible{outline:none}
/* Two lines: some role titles run to four ("Medical Director, Avenues Cambridge, Senior
   Consultant in Reproductive Medicine, Consultant Obstetrician &..."), which pushed the bio and
   the buttons out of line across a row. */
.av-tpl .lcard-role{
	font-size:.8125rem;font-weight:600;color:var(--green-600);margin:0;
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.av-tpl .lcard-actions{
	margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px
}
.av-tpl .lcard-actions .lcard-go{
	display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;color:var(--green-600)
}
.av-tpl .lcard-actions .lcard-go svg{width:14px;height:14px}
.av-tpl .lcard-split:hover .lcard-go{text-decoration:underline}
.av-tpl .lcard-book{
	position:relative;z-index:1;
	display:inline-flex;align-items:center;
	padding:7px 14px;border-radius:999px;
	background:var(--brand-sun);color:var(--grey-900);
	font-weight:700;font-size:.82rem;text-decoration:none;
	transition:filter var(--dur-base) var(--ease-out)
}
.av-tpl .lcard-book:hover{filter:brightness(.94)}
.av-tpl .lcard-book:focus-visible{outline:3px solid var(--focus-ring,var(--brand-green));outline-offset:2px}

/* ---- team cards on a doctor profile: Learn more + Book now ------------- */
/* Same arrangement as the directory cards: the name carries the profile link and stretches over
   the card, "Book now" sits above that overlay. The card is a flex column so the actions can be
   pushed to the bottom and line up across a row of uneven cards. */
.av-doctor .tcard{display:flex;flex-direction:column;height:100%}
.av-doctor .tcard-split{position:relative}
.av-doctor .tcard-split:has(.tcard-title-link:focus-visible){outline:3px solid var(--focus-ring,var(--brand-green));outline-offset:3px}
.av-doctor .tcard-title-link{color:inherit;text-decoration:none}
.av-doctor .tcard-title-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.av-doctor .tcard-title-link:focus-visible{outline:none}
.av-doctor .tcard-actions{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.av-doctor .tcard-go{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem;color:var(--green-600)}
.av-doctor .tcard-go svg{width:14px;height:14px}
.av-doctor .tcard:hover .tcard-go{text-decoration:underline}
.av-doctor .tcard-book{
	position:relative;z-index:1;
	display:inline-flex;align-items:center;
	padding:7px 14px;border-radius:999px;
	background:var(--brand-sun);color:var(--grey-900);
	font-weight:700;font-size:.82rem;text-decoration:none;
	transition:filter var(--dur-base) var(--ease-out)
}
.av-doctor .tcard-book:hover{filter:brightness(.94)}
.av-doctor .tcard-book:focus-visible{outline:3px solid var(--focus-ring,var(--brand-green));outline-offset:2px}