/* ClinicTrue ornament and picture layer (loaded after clinictrue.css).
   Institutional navy system stays. This adds the house's engraved pattern, guilloche line art and
   photo covers. Rules: ornament at the edges, data in the middle. Pattern never sits behind tables,
   prices, forms or legal text. Patterns are alpha masks coloured here (reference section 6). */

:root {
  --ct-scrim: 11, 31, 59;            /* deep navy as r,g,b for scrims */
}

/* ---- pattern: any element with .ct-pat gets an engraved layer behind its content ---- */
.ct-pat { position: relative; isolation: isolate; }
.ct-pat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ct-ink, var(--navy)); opacity: var(--ct-o, .16);
  -webkit-mask: var(--ct-mask) 0 0 / var(--ct-size, 320px) repeat;
          mask: var(--ct-mask) 0 0 / var(--ct-size, 320px) repeat;
}
.ct-pat-mx  { --ct-mask: url("../ct/pattern/pattern-mx.854b33807704.webp"); }
.ct-pat-co  { --ct-mask: url("../ct/pattern/pattern-co.89ae89fee923.webp"); }
.ct-pat-mix { --ct-mask: url("../ct/pattern/pattern-mix.0800958d3dc7.webp"); }
.ct-pat-open { --ct-mask: url("../ct/pattern/pattern-mix-open.ffbd9c79e937.webp"); }
/* hushed centre: a ground-coloured radial clearing so headings read and the pattern frames the edges */
.ct-pat.hush::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 75% at 50% 50%, var(--ct-ground, #fff) 0, var(--ct-ground, #fff) 48%, rgba(255,255,255,0) 100%);
}
.ct-pat.hush.on-mist { --ct-ground: var(--mist); }
.ct-pat.hush.on-mist::after { background: radial-gradient(ellipse 58% 75% at 50% 50%, var(--mist) 0, var(--mist) 48%, rgba(232,238,245,0) 100%); }

/* ---- guilloche line art (masks; colour from background) ---- */
.ct-guilloche-rule, .ct-divider, .ct-rosette { width: 72px; height: 72px; margin: 0 auto 8px; background: var(--navy);
  -webkit-mask: url("../ct/guilloche/rosette.40626ebf842d.svg") center / contain no-repeat; mask: url("../ct/guilloche/rosette.40626ebf842d.svg") center / contain no-repeat; }
.ct-guilloche-rule { height: 22px;
  -webkit-mask: url("../ct/guilloche/band.5120f043f18a.svg") 0 50% / auto 100% repeat-x; mask: url("../ct/guilloche/band.5120f043f18a.svg") 0 50% / auto 100% repeat-x; }
.ct-divider { height: 40px; width: min(100%, 900px); margin: 0 auto; background: var(--blue);
  -webkit-mask: url("../ct/guilloche/divider.e7008a4b24d3.svg") center / contain no-repeat; mask: url("../ct/guilloche/divider.e7008a4b24d3.svg") center / contain no-repeat; }
.ct-rosette { width: 64px; height: 64px; margin: 0 auto 8px; background: var(--navy);
  -webkit-mask: url("../ct/guilloche/rosette.40626ebf842d.svg") center / contain no-repeat; mask: url("../ct/guilloche/rosette.40626ebf842d.svg") center / contain no-repeat; }
.ct-section-gap { padding-block: 28px; }

/* ---- header: engraved band under the utility bar, white header row, thin guilloche finish ---- */
.ct-band { height: 40px; background: #fff; --ct-size: 360px; --ct-o: .55; }
@media (min-width: 800px) { .ct-band { height: 64px; --ct-size: 480px; } }
.site-header { border-bottom: 0; }
.site-header::after { content: ""; display: block; height: 14px; background: var(--navy);
  -webkit-mask: url("../ct/guilloche/band.5120f043f18a.svg") 0 50% / auto 100% repeat-x; mask: url("../ct/guilloche/band.5120f043f18a.svg") 0 50% / auto 100% repeat-x; }

/* ---- photo blocks ---- */
.ct-caption { position: absolute; right: 10px; bottom: 8px; z-index: 3; font: 500 11px/1.2 var(--sans);
  color: rgba(255,255,255,.92); background: rgba(var(--ct-scrim), .72); padding: 3px 7px; border-radius: 3px; }

.ct-hero { position: relative; isolation: isolate; color: #fff; background: var(--deep); overflow: hidden; }
.ct-hero__media { position: relative; aspect-ratio: 3 / 2; }
.ct-hero__media picture, .ct-hero__media img { display: block; width: 100%; height: 100%; }
.ct-hero__media img { object-fit: cover; }
.ct-hero__scrim { display: none; }
.ct-hero__inner { padding-block: 26px 30px; display: grid; }
.ct-hero__copy { display: grid; gap: 16px; }
.ct-hero h1 { color: #fff; }
.ct-hero .eyebrow { color: #BFD6F0; }
.ct-hero p { font-size: 18px; color: #EAF1F9; }
.ct-hero .searchbox { border-color: #fff; }
@media (min-width: 801px) {
  .ct-hero { min-height: 470px; aspect-ratio: 16 / 7; display: flex; align-items: center; }
  .ct-hero__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -2; }
  .ct-hero__media img { object-position: 72% 50%; }
  .ct-hero__scrim { display: block; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(var(--ct-scrim), .93) 0%, rgba(var(--ct-scrim), .90) 34%, rgba(var(--ct-scrim), .74) 44%, rgba(var(--ct-scrim), 0) 58%); }
  .ct-hero__inner { width: 100%; padding-block: 48px; }
  .ct-hero__copy { width: min(500px, 38vw); min-width: 340px; }
  .ct-hero h1 { font-size: clamp(30px, 3.6vw, 50px); }
  .ct-hero p { font-size: clamp(15px, 1.35vw, 18px); }
}
.ct-stats-row { padding-block: 22px 6px; }
.ct-stats-row .stats { border-top: 0; padding-top: 0; }

.ct-photohead { position: relative; isolation: isolate; color: #fff; background: var(--deep); overflow: hidden; min-height: 200px; display: flex; align-items: flex-end; }
.ct-photohead > picture, .ct-photohead > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ct-photohead img { object-fit: cover; }
.ct-photohead__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ct-scrim), .86), rgba(var(--ct-scrim), .84)); }
@media (min-width: 800px) {
  .ct-photohead { min-height: 280px; }
  .ct-photohead__scrim { background: linear-gradient(90deg, rgba(var(--ct-scrim), .92) 0%, rgba(var(--ct-scrim), .88) 50%, rgba(var(--ct-scrim), .30) 100%); }
}
.ct-photohead__inner { width: 100%; padding-block: 28px 34px; display: grid; gap: 10px; }
.ct-photohead__inner > * { max-width: 62ch; }
.ct-photohead h1, .ct-photohead .crumb, .ct-photohead .crumb a, .ct-photohead p { color: #fff; }
.ct-photohead .crumb { opacity: .95; }
.ct-photohead p { font-size: 18px; }

/* pattern header (procedure and clinic pages): country pattern behind the heading only */
.ct-patternhead { background: var(--mist); border-bottom: 1px solid var(--line); --ct-size: 560px; --ct-o: .2; }
.ct-patternhead__inner { padding-block: 26px 30px; display: grid; gap: 10px; }
.ct-patternhead h1, .ct-patternhead h2 { margin: 0; }
.ct-patternhead .clinic-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---- picture cards ---- */
.ct-cards { display: grid; gap: 14px; }
.ct-cards--countries { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ct-cards--countries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* cities: 2 columns on phones and tablets, 3 on desktop; a last card left alone spans the row */
.ct-cards--cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-cards--cities .ct-card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
@media (min-width: 1000px) {
  .ct-cards--cities { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ct-cards--cities .ct-card { grid-column: span 2; }
  .ct-cards--cities .ct-card:last-child:nth-child(odd) { aspect-ratio: 8 / 5; grid-column: span 2; }
  .ct-cards--cities .ct-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
  .ct-cards--cities .ct-card:nth-last-child(2):nth-child(3n+1), .ct-cards--cities .ct-card:last-child:nth-child(3n+2) { grid-column: span 3; aspect-ratio: 16 / 7; }
}
.ct-card { position: relative; display: block; overflow: hidden; border-radius: 4px; background: var(--deep); color: #fff;
  text-decoration: none; aspect-ratio: 8 / 5; isolation: isolate; }
.ct-card--lg { aspect-ratio: 16 / 8; }
.ct-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.ct-card:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ct-card:hover img { transform: none; } }
.ct-card__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ct-scrim), 0) 0%, rgba(var(--ct-scrim), 0) 52%, rgba(var(--ct-scrim), .85) 66%, rgba(var(--ct-scrim), .88) 100%); }
.ct-card__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; display: grid; gap: 2px; }
.ct-card__text b { font: 600 clamp(19px, 2.4vw, 26px)/1.15 var(--serif); color: #fff; }
.ct-card--lg .ct-card__text b { font-size: clamp(24px, 3.2vw, 34px); }
.ct-card__text small { font: 500 13.5px var(--sans); color: #F1F6FB; }
.ct-card:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* ---- numbered plates ("No. 1") on the open pattern with a hushed centre ---- */
.ct-plates { --ct-size: 640px; --ct-o: .2; padding-block: 44px 48px; background: #fff; }
.ct-plates .head { text-align: center; display: grid; gap: 6px; margin-bottom: 26px; }
.ct-plates .grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .ct-plates .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ct-plate { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
.ct-plate .no { font: italic 600 30px/1 var(--serif); color: var(--blue); }
.ct-plate b { font: 600 20px/1.2 var(--serif); color: var(--navy); }

/* ---- footer: deep navy, pattern along the top edge in sky, guilloche divider ---- */
.site-footer { position: relative; margin-top: 48px; padding-top: 0; overflow: hidden; }
.ct-footer-edge { height: 56px; --ct-ink: var(--sky); --ct-o: .22; --ct-size: 420px; }
.ct-footer-rule { color: var(--sky); padding-block: 4px 18px; }
.ct-footer-rule .ct-divider { background: var(--sky); opacity: .8; }
.site-footer .footer-row { padding-top: 6px; }

/* mobile safety: nothing may push the page wider than the viewport */
html, body { max-width: 100%; overflow-x: hidden; }
.ct-hero, .ct-photohead, .ct-plates, .ct-patternhead { max-width: 100vw; }

/* ---- city+procedure and procedure pages: tight intro block, full-width tables, compact checklist ---- */
.ct-intro { display: grid; gap: 10px; max-width: 72ch; }
.ct-intro p { margin: 0; }
.ct-intro .btn { justify-self: start; margin-top: 4px; }
.ct-checklist { display: grid; gap: 14px; }
.ct-checklist .row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ct-checklist .row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ct-checklist .row { grid-template-columns: minmax(0, 1fr); } }
.ct-checklist .ct-plate { padding: 14px 16px 16px; gap: 6px; }
.ct-checklist .ct-plate .no { font-size: 22px; }
.ct-checklist .ct-plate span:last-child { font-size: 15px; color: var(--slate); }
.ct-checklist .btn { justify-self: start; }