/* Site changes on top of the approved design. landing.css and landing-tokens.css stay as they came
   in the handoff (so a new handoff can replace them); anything the site needs beyond them goes here.
   Loads after landing.css. */

/* Explainer video: the clip is portrait (9:16), so the player takes its shape instead of the
   design's 16:9. It's as big as fits: at most 380px wide, and never taller than 82% of the screen,
   so the whole clip stays in view while it plays on a phone. Centred in its column on desktop and
   under the text on tablets and phones. (The first width is for browsers without svh units.) */
.pmc-video__player--portrait{
	aspect-ratio:9/16;
	justify-self:center;
	width:min(100%,380px,calc(82vh*9/16));
	width:min(100%,380px,calc(82svh*9/16));
}

/* Meet the doctors: each card links to the doctor's profile on privatemedicalclinic.com (new tab,
   so the booking page stays open). "View profile" shows the cards are tappable on phones. */
.pmc-doc--link{transition:border-color .15s,box-shadow .15s}
.pmc-doc--link:hover{border-color:var(--color-action-primary-default);box-shadow:0px 8px 40px 0px rgba(0,0,0,0.08)}
.pmc-doc--link:focus-visible{outline:3px solid var(--color-action-primary-default);outline-offset:2px}
.pmc-doc__more{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:13px;font-weight:600;color:var(--color-action-primary-default)}
.pmc-doc__more .pmc-ico{width:16px;height:16px;transition:transform .15s}
.pmc-doc--link:hover .pmc-doc__more .pmc-ico{transform:translateX(3px)}

/* Text for screen readers only (e.g. "opens in a new tab", "Play video:"). */
.pmc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The design's grey text sits at 4.4:1 contrast on the light-blue prices section, just under the
   4.5:1 accessibility minimum; a slightly darker grey there reaches 5.9:1. */
.pmc-section--highlight .pmc-lead,.pmc-section--highlight .pmc-extras span,.pmc-section--highlight .pmc-extras small{color:rgb(84,93,112)}

/* Tap targets: at least 44px (Apple's guideline) for every small link and button, by adding an
   invisible touch area around them, so nothing changes visually. */
.pmc-header__logo,.pmc-header__phone,.pmc-header .pmc-btn,.pmc-sticky .pmc-btn,.pmc-hero-tp,
.pmc-reviews__all,.pmc-footer__logo,.pmc-circbtn{position:relative}
.pmc-header__logo::after,.pmc-header__phone::after,.pmc-header .pmc-btn::after,.pmc-sticky .pmc-btn::after,
.pmc-hero-tp::after,.pmc-reviews__all::after,.pmc-footer__logo::after,.pmc-circbtn::after{content:"";position:absolute}
.pmc-header__logo::after{inset:-13px -4px}
.pmc-header__phone::after{inset:-10px}
.pmc-header .pmc-btn::after,.pmc-sticky .pmc-btn::after{inset:-4px 0}
.pmc-hero-tp::after{inset:-12px 0}
.pmc-reviews__all::after{inset:-14px -6px}
.pmc-footer__logo::after{inset:-11px 0}
.pmc-circbtn::after{inset:-2px}

/* The hero clips its background with overflow:hidden, which also makes it a scroll container, so
   Chrome measured #book's 88px scroll-margin against the hero and "Book now" left the booking card's
   title under the sticky header. overflow:clip clips the same without that (hidden stays as the
   fallback for browsers older than Safari 16). */
.pmc-hero{overflow:hidden;overflow:clip}

/* "Book now" and the other #book links glide to the booking form rather than jump. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Phones (most visitors). From a measured audit at 320-430px wide. */
@media (max-width:760px){
	/* Booking card title: two balanced lines instead of running off the screen. */
	.pmc-book__title{white-space:normal;text-wrap:balance}
	/* Doctors online now: long qualifications wrap instead of pushing the cards past the edge. */
	.pmc-gps__list{grid-template-columns:minmax(0,1fr)}
	.pmc-gp__name,.pmc-gp__meta{white-space:normal}
	/* Small print no smaller than 12px. */
	.pmc-gp__meta,.pmc-gp__gmc,.pmc-strip__item small{font-size:12px}
	/* "Everything you need" cards hold sentences: one per row instead of two cramped columns. */
	[data-block="what-you-get"] .pmc-grid--4{grid-template-columns:1fr}
}

/* Narrowest phones (under 360px, e.g. iPhone SE 1st gen, small Androids): keep "Phone call £49 |
   Video call £79" on one line each by tightening the divider spacing. */
@media (max-width:359px){
	.pmc-book__fees>div{padding-right:10px;margin-right:10px}
	.pmc-book__fees dt{white-space:nowrap}
}

/* Footer links on touch screens (phones, also held sideways, and tablets): full-height 44px rows,
   each easy to tap. */
@media (max-width:760px),(pointer:coarse){
	.pmc-footer__links{gap:0 20px}
	.pmc-footer__links a{display:inline-flex;align-items:center;min-height:44px}
}