/* /location/<slug>/<anchor>/ pages - the parts these pages add on top of /location/styles/centre-v2.css (the hub design).
   Source: claude-components/location-hub/anchor.css. build_anchor.py copies it to location/styles/anchor-v1.css and
   versions the link by content hash. Edit this file, not the copy. */

/* ---------- banner: the doctor list (white on the hero) and the lead line on the general oncologist pages */
.lc-hero__copy .lc-list{margin:4px 0 22px}
.lc-hero__copy .lc-list li{color:#fff}
.lc-hero__copy .lc-list li+li{margin-top:8px}
.lc-hero__copy .lc-list a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lc-hero__copy .lc-list a:hover{color:#ffd7e6}
.lc-hero__copy .lc-list small{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:#ecdcf0}

/* ---------- the centre's doctors: full-width profile cards (also in centre-v2.css [D8] for the hubs) */
.lcx-docs{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.lcx-doc{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:var(--r2);
 padding:22px;box-shadow:var(--sh1);transition:box-shadow .15s,border-color .15s}
.lcx-doc:hover{box-shadow:var(--sh2);border-color:var(--lav2)}
.lcx-doc__img{flex:none;width:128px;height:128px;border-radius:50%;object-fit:cover;border:3px solid var(--pink);background:var(--lav)}
.lcx-doc__body{min-width:0;flex:1}
.lcx-doc__n{margin:0;font-family:var(--fh);font-weight:700;font-size:20px;line-height:1.3}
.lc .lcx-doc__n a{color:var(--p);text-decoration:none}
.lc .lcx-doc__n a:hover{text-decoration:underline}
.lcx-doc__r{margin:2px 0 10px;color:var(--pink);font-weight:600;font-size:15px}
.lcx-doc__facts{list-style:none;margin:0;padding:0;display:grid;gap:7px;color:var(--ink2);font-size:15px;line-height:1.45}
.lcx-doc__facts li{display:flex;gap:9px;align-items:flex-start}
.lcx-doc__facts .lc-ico{flex:none;width:18px;height:18px;margin-top:2px;color:var(--p2)}
.lcx-doc__facts strong{color:var(--ink)}
.lcx-doc__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lcx-docs--1 .lcx-doc{padding:28px 32px}
.lcx-docs--1 .lcx-doc__img{width:150px;height:150px}

/* ---------- compact doctor cards: the oncologist pages and any page with 4+ doctors (owner, 2026-10-23: "too bulky") */
.lcx-docs--compact{gap:14px}
.lcx-doc--sm{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 18px;text-align:left}
.lcx-doc--sm .lcx-doc__img{width:100px;height:100px;border-width:3px}
.lcx-doc--sm .lcx-doc__n{font-size:17px}
.lcx-doc--sm .lcx-doc__r{margin:1px 0 6px;font-size:13.5px}
.lcx-doc--sm .lcx-doc__r strong{color:var(--ink);font-weight:600}
.lcx-doc__q{margin:0 0 4px;color:var(--ink2);font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
 -webkit-box-orient:vertical;overflow:hidden}
.lcx-doc__w{display:flex;gap:6px;align-items:flex-start;margin:0;color:var(--ink2);font-size:13.5px;line-height:1.4}
.lcx-doc__w .lc-ico{flex:none;width:15px;height:15px;margin-top:2px;color:var(--p2)}
.lcx-doc--sm .lcx-doc__cta{gap:8px;margin-top:10px}
.lc .lcx-mini{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;font-size:13.5px;
 font-weight:600;line-height:1.2;text-decoration:none;background:var(--p);color:#fff;border:1.5px solid var(--p)}
.lc .lcx-mini:hover{background:var(--pd);border-color:var(--pd)}
.lc .lcx-mini--line{background:#fff;color:var(--p)}
.lc .lcx-mini--line:hover{background:var(--lav);color:var(--p)}

/* ---------- haematology: the doctor's card with a booking box beside it (owner, 2026-10-23) */
.lcx-pair{display:grid;gap:18px;margin-top:20px;grid-template-columns:minmax(0,1fr);align-items:stretch}
.lcx-pair .lc-docs{margin-top:0;grid-template-columns:minmax(0,1fr)}
.lcx-pair .lc-doc{height:100%;box-sizing:border-box}
.lcx-side{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 24px;border-radius:var(--r2);
 background:var(--lav);border:1px solid var(--lav2);border-left:4px solid var(--pink)}
.lc .lcx-side .lcx-side__h{margin:0;font-family:var(--fh);font-weight:700;font-size:20px;line-height:1.3;color:var(--p)}
.lc .lcx-side p{margin:0;color:var(--ink2);font-size:15px;line-height:1.5}
.lcx-side__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (min-width:900px){ .lcx-pair{grid-template-columns:minmax(320px,1fr) minmax(0,2fr)} }
@media (min-width:1440px){ .lc .lcx-side .lcx-side__h{font-size:21px} .lc .lcx-side p{font-size:15.5px} }
@media (min-width:1920px){ .lcx-pair{gap:24px} .lcx-side{padding:28px 32px} .lc .lcx-side .lcx-side__h{font-size:24px} .lc .lcx-side p{font-size:17.5px} }
@media (min-width:2560px){ .lcx-pair{gap:32px} .lcx-side{padding:36px 42px;gap:14px} .lc .lcx-side .lcx-side__h{font-size:30px} .lc .lcx-side p{font-size:21px} }
@media (max-width:359px){ .lcx-side{padding:16px} .lcx-side__cta .lc-btn{flex:1 1 100%;justify-content:center} }

/* ---------- accordion sections and the nearby locations cards */
.lc-acc{margin-top:18px}
.lc-acc+.lc-band{margin-top:18px}
#lc-nearby .lc-cards3{margin-top:18px}
#lc-nearby .lc-card{padding-bottom:18px}
#lc-nearby .lc-card h3 a{color:inherit;text-decoration:none}
#lc-nearby .lc-card h3 a:hover{text-decoration:underline}
#lc-nearby .lc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:4px}
#lc-nearby .lc-list li{margin:0}
#lc-nearby .lc-list a{color:var(--p);text-decoration:none}
#lc-nearby .lc-list a:hover{text-decoration:underline}
#lc-nearby .lc-list a[aria-current]{font-weight:700;text-decoration:underline}
/* a location's six specialist pages as a chip row (outside Hyderabad, and on the hub's "Find a Specialist" section) */
.lcx-sibs{margin-top:16px}
.lc .lcx-sibs a[aria-current]{background:var(--p);color:#fff;border-color:var(--p)}

/* =====================================================================================================================
   DEVICE TIERS. Widths follow centre-v2.css (its .lc-w steps at 1440 / 1680 / 1920 / 2560) so these parts scale with
   the rest of the page. Mobile-first: each tier only changes what differs from the one below it.
   ===================================================================================================================== */

/* Small phones, up to 359px (older Android, iPhone SE 1st gen) */
@media (max-width:359px){
 .lc-hero__copy .lc-list a{font-size:15px}
 .lc-hero__copy .lc-list small{font-size:12.5px}
 .lcx-doc{padding:16px;gap:12px}
 .lcx-doc__img,.lcx-docs--1 .lcx-doc__img{width:100px;height:100px}
 .lcx-doc__n{font-size:18px}
 .lcx-doc__facts{font-size:14px}
 .lcx-doc__cta .lc-btn{flex:1 1 100%;justify-content:center}
 #lc-nearby .lc-list{grid-template-columns:minmax(0,1fr)}
}

/* Phones, 360-479px (most Android phones, iPhone 12-16) */
@media (min-width:360px) and (max-width:479px){
 .lcx-doc__img,.lcx-docs--1 .lcx-doc__img{width:112px;height:112px}
 .lcx-doc__n{font-size:19px}
}

/* All phones: cards stack, photo above the text */
@media (max-width:520px){
 .lcx-doc,.lcx-docs--1 .lcx-doc{flex-direction:column;align-items:center;text-align:center;padding:20px}
 .lcx-doc__facts li{justify-content:center;text-align:left}
 .lcx-doc__cta{justify-content:center}
}

/* Phones turned sideways: short screens, keep the banner list compact */
@media (max-height:500px) and (orientation:landscape){
 .lc-hero__copy .lc-list li+li{margin-top:4px}
 .lc-hero__copy .lc-list small{display:inline;margin-left:4px}
}

/* Large phones and small tablets, 480-767px */
@media (min-width:480px) and (max-width:767px){
 .lcx-doc__img{width:120px;height:120px}
}

/* Tablets, 768-1023px (iPad portrait and landscape): two cards per row */
@media (min-width:768px){
 .lcx-docs--2,.lcx-docs--3{grid-template-columns:repeat(2,minmax(0,1fr))}
 #lc-nearby .lc-cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Small laptops, 1024px and up: one wide card lays its facts out in three columns */
@media (min-width:900px){
 .lcx-docs--1 .lcx-doc__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px}
}
@media (min-width:980px){
 #lc-nearby .lc-cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Laptops, 1080px and up: three doctors per row, photo above the text */
@media (min-width:1080px){
 .lcx-docs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .lcx-docs--3 .lcx-doc{flex-direction:column;gap:14px}
 .lcx-docs--3 .lcx-doc__img{width:120px;height:120px}
}

/* Desktops, 1440-1679px */
@media (min-width:1440px){
 .lc-hero__copy .lc-list a{font-size:17.5px}
 .lc-hero__copy .lc-list small{font-size:14.5px}
 .lcx-doc__n{font-size:21px}
 .lcx-doc__r{font-size:15.5px}
 .lcx-doc__facts{font-size:15.5px}
 .lcx-doc__img,.lcx-docs--1 .lcx-doc__img{width:136px;height:136px}
 .lcx-docs--3 .lcx-doc__img{width:124px;height:124px}
 #lc-nearby .lc-list{font-size:15.5px}
}

/* Large desktops, 1680-1919px */
@media (min-width:1680px){
 .lc-hero__copy .lc-list a{font-size:18.5px}
 .lc-hero__copy .lc-list small{font-size:15.5px}
 .lcx-docs{gap:22px}
 .lcx-doc{padding:26px;gap:24px}
 .lcx-doc__n{font-size:22.5px}
 .lcx-doc__r{font-size:16.5px}
 .lcx-doc__facts{font-size:16.5px;gap:9px}
 .lcx-doc__img,.lcx-docs--1 .lcx-doc__img{width:144px;height:144px}
 .lcx-docs--3 .lcx-doc__img{width:132px;height:132px}
 #lc-nearby .lc-cards3{gap:22px}
 #lc-nearby .lc-list{font-size:16.5px}
}

/* Full HD monitors and TVs, 1920-2559px */
@media (min-width:1920px){
 .lc-hero__copy .lc-list a{font-size:20px}
 .lc-hero__copy .lc-list small{font-size:16.5px}
 .lcx-docs{gap:26px}
 .lcx-doc{padding:30px;gap:28px}
 .lcx-doc__n{font-size:25px}
 .lcx-doc__r{font-size:17.5px}
 .lcx-doc__facts{font-size:17.5px}
 .lcx-doc__facts .lc-ico{width:20px;height:20px}
 .lcx-doc__img,.lcx-docs--1 .lcx-doc__img{width:160px;height:160px}
 .lcx-docs--3 .lcx-doc__img{width:144px;height:144px}
 #lc-nearby .lc-cards3{gap:26px}
 #lc-nearby .lc-list{font-size:17.5px;gap:10px 18px}
}

/* 4K TVs and large displays, 2560px and up */
@media (min-width:2560px){
 .lc-hero__copy .lc-list a{font-size:25px}
 .lc-hero__copy .lc-list small{font-size:20px}
 .lc-hero__copy .lc-list li+li{margin-top:12px}
 .lcx-docs{gap:34px}
 .lcx-doc{padding:40px;gap:36px;border-radius:28px}
 .lcx-doc__n{font-size:31px}
 .lcx-doc__r{font-size:21px;margin-bottom:14px}
 .lcx-doc__facts{font-size:21px;gap:12px}
 .lcx-doc__facts .lc-ico{width:24px;height:24px}
 .lcx-doc__cta{gap:14px;margin-top:22px}
 .lcx-doc__img,.lcx-docs--1 .lcx-doc__img{width:210px;height:210px;border-width:4px}
 .lcx-docs--3 .lcx-doc__img{width:180px;height:180px}
 .lc-acc{margin-top:26px}
 #lc-nearby .lc-cards3{gap:34px;margin-top:26px}
 #lc-nearby .lc-list{font-size:21px;gap:14px 24px}
}

/* ---------- Content width (owner, 2026-10-23: "look at the amount of space left in the sides"). centre-v2.css caps
   .lc-w at 1160 / 1320 / 1480 / 1680 / 2200px, which strands the page in the middle of a wide screen while the site
   header runs edge to edge. From laptops up, the content now tracks the viewport like the header does (about 94% of
   the width, so it lines up with the logo and the menu), with a ceiling on 4K screens to keep lines readable.
   Phones and tablets keep centre-v2.css's own padding. */
@media (min-width:1080px){
 .lc .lc-w{max-width:none;width:92vw;padding-left:0;padding-right:0}
}
@media (min-width:1440px){
 .lc .lc-w{width:93vw}
}
@media (min-width:1680px){
 .lc .lc-w{width:94vw}
}
@media (min-width:2560px){
 .lc .lc-w{width:min(94vw,2400px)}
}

/* ---------- Compact doctor cards across devices (after the full-card tiers above, so these win) */
.lcx-docs--compact{grid-template-columns:minmax(0,1fr)}
.lcx-docs--compact .lcx-doc--sm{flex-direction:row;align-items:flex-start;text-align:left;padding:16px 18px;gap:14px}
.lcx-docs--compact .lcx-doc--sm .lcx-doc__cta{justify-content:flex-start}
@media (max-width:359px){
 .lcx-docs--compact .lcx-doc--sm{padding:14px;gap:12px}
 .lcx-doc--sm .lcx-doc__img{width:80px;height:80px}
}
@media (min-width:768px){ .lcx-docs--compact{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .lcx-docs--compact{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1440px){ .lcx-docs--compact{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1920px){
 .lcx-docs--compact{gap:18px}
 .lcx-docs--compact .lcx-doc--sm{padding:20px 22px;gap:16px}
 .lcx-doc--sm .lcx-doc__img{width:116px;height:116px}
 .lcx-doc--sm .lcx-doc__n{font-size:19px}
 .lcx-doc--sm .lcx-doc__r,.lcx-doc__q,.lcx-doc__w,.lc .lcx-mini{font-size:15px}
}
@media (min-width:2560px){
 .lcx-docs--compact{gap:24px}
 .lcx-docs--compact .lcx-doc--sm{padding:28px 30px;gap:22px}
 .lcx-doc--sm .lcx-doc__img{width:150px;height:150px;border-width:4px}
 .lcx-doc--sm .lcx-doc__n{font-size:24px}
 .lcx-doc--sm .lcx-doc__r,.lcx-doc__q,.lcx-doc__w,.lc .lcx-mini{font-size:19px}
 .lcx-doc__w .lc-ico{width:20px;height:20px}
 .lc .lcx-mini{padding:9px 20px}
}

/* =====================================================================================================================
   LOCATION HUB SECTIONS (/location/<slug>/ links this file too, owner 2026-10-23). centre-v2.css already scales type and
   spacing at 1440 / 1680 / 1920 / 2560; these tiers make the hub's grids use the wider content area and keep small
   phones tidy. Selectors only match hub markup, so the specialist pages are unaffected.
   ===================================================================================================================== */

/* Small phones, up to 359px */
@media (max-width:359px){
 .lc-cx{gap:6px}
 .lc-svc-grid,.lc-steps,.lc-spot__cards{grid-template-columns:minmax(0,1fr)}
 .lc-glance{padding:16px}
 .lc-qc{padding:14px}
 .lc-book{gap:14px}
}

/* Phones, 360-599px */
@media (min-width:360px) and (max-width:599px){
 .lc-svc-grid{grid-template-columns:minmax(0,1fr)}
}

/* Phones (one step per row): a shorter picture, so four or five steps do not run several screens long */
@media (max-width:719px){
 .lc-step__img{aspect-ratio:16/7}
}

/* Tablets, 768-1079px: the services grid in two columns, steps two by two */
@media (min-width:768px) and (max-width:1079px){
 .lc-spot__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Desktops, 1440px and up: services in four columns now the content area is wider */
@media (min-width:1440px){
 .lc-svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
 .lc-book{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
 .lc-faqwrap{grid-template-columns:minmax(0,.6fr) minmax(0,2fr);gap:48px}
}

/* Large desktops, 1680px and up */
@media (min-width:1680px){
 .lc-cx{gap:14px}
 .lc-steps{gap:24px}
 .lc-panel{gap:26px}
}

/* Full HD monitors and TVs, 1920px and up: cancer tiles in one row of twelve */
@media (min-width:1920px){
 .lc-cx{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
 .lc-svc-grid{gap:18px}
 .lc-steps{gap:28px}
 .lc-book{gap:34px}
 .lc-spot__cards{gap:18px}
}

/* 4K TVs, 2560px and up */
@media (min-width:2560px){
 .lc-cx{gap:20px}
 .lc-svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
 .lc-steps{gap:36px}
 .lc-book{gap:44px}
 .lc-panel{gap:34px}
 .lc-spot__cards{gap:24px}
 .lc-faqwrap{gap:64px}
 .lcx-sibs{gap:14px}
 .lc .lcx-sibs a{font-size:20px}
}

/* Printing: no buttons or the sticky call bar on paper */
@media print{
 .lc-bar,.lcx-doc__cta{display:none}
 .lcx-doc{box-shadow:none;break-inside:avoid}
}