/* ==========================================================================
   Medipol group pages — hospitals, departments, doctors, technology, media
   ========================================================================== */

.mhead { max-width: 66ch; margin-bottom: var(--s6); }
.mhead h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* ---- Hospital cards ------------------------------------------------------- */

.hgrid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.hcard {
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.hcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* The flagship reads differently on purpose — it is where most patients go. */
.hcard--flagship { border-color: var(--blue); box-shadow: var(--shadow); }
.hcard--flagship .hcard__img--none { background: var(--navy); }

.hcard__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hcard__img--none {
  display: grid; place-items: center; font-size: 2.4rem;
  background: var(--blue-soft); color: var(--white);
}
.hcard--flagship .hcard__img--none span { filter: grayscale(1) brightness(3); }

.hcard__body { padding: var(--s4); display: grid; gap: var(--s2); }
.hcard__title { font-size: 1.02rem; margin: 0; line-height: 1.35; }
.hcard__city { margin: 0; font-size: .87rem; color: var(--blue); font-weight: 500; }

/* ---- Department cards ----------------------------------------------------- */

.dgrid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.dcard {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r); padding: var(--s4);
  color: inherit; transition: border-color .15s, background .15s;
}
.dcard:hover { text-decoration: none; border-color: var(--blue); background: var(--blue-soft); }
.dcard__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--blue-soft);
}
.dcard:hover .dcard__icon { background: var(--white); }
.dcard__body { display: grid; gap: 3px; min-width: 0; }
.dcard__title { font-weight: 600; color: var(--navy); }
.dcard__desc { line-height: 1.5; }

/* ---- Doctor directory: sidebar + 4 per row --------------------------------
   1047 doctors. Only the selected department is ever in the DOM — rendering
   the whole set means a thousand <img> on one page, which is unusable on the
   connections most of our patients are on. Same pattern as the 3aychek seller
   dashboard.
   -------------------------------------------------------------------------- */

/* Four across on desktop, two on tablet, one on a phone. */
.docgrid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 520px)  { .docgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .docgrid { grid-template-columns: repeat(4, 1fr); } }

.doc {
  text-align: center; display: block; color: inherit;
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r-lg); padding: var(--s5) var(--s4);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.doc:hover {
  text-decoration: none; transform: translateY(-4px);
  box-shadow: var(--shadow-lg); border-color: var(--blue-line);
}
.doc__photo {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  margin: 0 auto var(--s3); background: var(--blue-soft); display: block;
  border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--grey-200);
}
.doc:hover .doc__photo { box-shadow: 0 0 0 2px var(--blue); }
.doc__photo--none { display: grid; place-items: center; font-size: 1.9rem; color: var(--blue); }
.doc__title { font-size: .78rem; color: var(--blue); font-weight: 600; }
.doc__name { font-weight: 600; font-size: .96rem; color: var(--navy); line-height: 1.3; margin-top: 2px; }
.doc__dept { font-size: .82rem; color: var(--grey-600); margin-top: var(--s2); }
.doc__hosp { font-size: .78rem; color: var(--grey-400); }


/* ---- Doctor detail page ---------------------------------------------------- */

.dochero {
  display: grid; gap: var(--s6); align-items: start;
  padding-bottom: var(--s6); border-bottom: 1px solid var(--grey-200);
}
@media (min-width: 760px) { .dochero { grid-template-columns: 200px minmax(0, 1fr); } }

.dochero__photo {
  width: 100%; max-width: 200px; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-lg); background: var(--blue-soft);
  box-shadow: var(--shadow);
}
.dochero h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--s2); }
.dochero__title { color: var(--blue); font-weight: 600; margin-bottom: var(--s3); }
.dochero__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }

.docsec { margin-top: var(--s7); }
.docsec h2 {
  font-size: 1.1rem; margin-bottom: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--grey-200);
}
.docsec p { font-size: .97rem; }
.docsec ul { padding-inline-start: var(--s5); }
.docsec li + li { margin-top: var(--s2); }

/* ---- CV chronology ---------------------------------------------------------
   Medipol's own layout: the period on a rail, a dot on the line, the place
   beside it. Rebuilt from the scraped paragraph order by timeline() in
   js/doctor.js. Logical properties throughout, so the rail is on the right in
   Arabic without a second rule.
   -------------------------------------------------------------------------- */

.tline { list-style: none; margin: 0; padding: 0; position: relative; }
.tline::before {
  content: ''; position: absolute; inset-block: 10px;
  inset-inline-start: 4px; width: 2px;
  background: linear-gradient(to bottom, var(--blue-line), var(--grey-200));
}
.tline__row {
  position: relative; display: grid; gap: 2px var(--s5);
  padding-inline-start: var(--s5); padding-block: 0 var(--s5);
}
@media (min-width: 620px) {
  .tline__row { grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; }
}
.tline__row::before {
  content: ''; position: absolute; inset-block-start: 9px; inset-inline-start: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--blue);
  transition: transform .2s, background-color .2s;
}
.tline__row:first-child::before { background: var(--blue); }
.tline__row:hover::before { transform: scale(1.25); background: var(--teal); border-color: var(--teal); }

/* Not `white-space: nowrap`. Medipol reuses the `.year` class on publication
   lines, so this column occasionally receives a full citation instead of
   "2015 – 2018"; nowrap made it run straight across the text beside it.
   js/doctor.js now routes those sections to .doclist, and this is the belt to
   that pair of braces. */
.tline__when {
  font-weight: 700; font-size: .92rem; color: var(--blue);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tline__what { font-size: .97rem; color: var(--grey-900); overflow-wrap: anywhere; }

/* Publications and anything else that wears a chronology's markup without
   being one: a plain numbered list, which is what it actually is. */
.doclist { margin: 0; padding-inline-start: var(--s5); }
.doclist li {
  font-size: .93rem; color: var(--grey-900); line-height: 1.6;
  margin-bottom: var(--s3); overflow-wrap: anywhere;
}
.doclist li::marker { color: var(--blue); font-weight: 600; }

/* ---- Doctor reels ----------------------------------------------------------
   Cards, not inline Instagram iframes. The embed puts a "View more on
   Instagram" bar across the middle of the video and it is an exit link on the
   one page built to keep the patient here. These open the shared lightbox.
   -------------------------------------------------------------------------- */

.docvideos { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .docvideos { grid-template-columns: repeat(4, 1fr); } }

.docvideo {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 9/16; border-radius: var(--r-lg); overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.docvideo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.docvideo:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.docvideo__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  opacity: .82; transition: transform .5s, opacity .25s;
}
.docvideo:hover .docvideo__img { transform: scale(1.06); opacity: 1; }
.docvideo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,29,61,.1) 35%, rgba(7,29,61,.72));
}
.docvideo__play {
  position: absolute; inset-block-end: var(--s3); inset-inline: var(--s3); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.92); color: var(--navy);
  font-size: .75rem; font-weight: 600;
}

/* Per-facility figures, under the description. Small and factual — these are
   Medipol's own numbers and they should read as data, not as a boast. */
.hcard__facts {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.hcard__facts li {
  font-size: .78rem; font-weight: 600; color: var(--grey-600);
  background: var(--grey-100); border-radius: var(--r-full); padding: 3px 10px;
}

/* ---- Equipment catalogue ---------------------------------------------------
   71 devices. Denser than the hospital grid: these are objects, not places,
   and the name is what people search for ("Gamma Knife Istanbul").
   -------------------------------------------------------------------------- */

/* Three across beside the category rail, four when the rail is not there. */
.techgrid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.dirwrap .techgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (min-width: 1100px) { .dirwrap .techgrid { grid-template-columns: repeat(3, 1fr); } }
.tech {
  display: flex; flex-direction: column;
  border: 1px solid var(--grey-200); border-radius: var(--r-lg);
  overflow: hidden; background: var(--white);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.tech:hover { transform: translateY(-4px); box-shadow: var(--e2, var(--shadow-lg)); }
.tech__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* Drawn, not photographed — see the note in js/technology.js. It must never be
   mistaken for a picture of the actual machine, so it is flat, branded and
   captioned with the device family. */
.tech__img--none {
  display: grid; place-items: center; align-content: center; gap: var(--s2);
  background: linear-gradient(135deg, var(--blue-soft) 0%, #DCEAF7 100%);
  color: var(--blue); text-align: center; padding: var(--s4);
  border-bottom: 1px solid var(--blue-line);
}
.tech__glyph { font-size: 1.9rem; line-height: 1; filter: saturate(.5); }
.tech__none {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy); opacity: .55;
  line-height: 1.3;
}
.tech__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.tech__title { font-size: 1rem; margin: 0; }
.tech__type { font-size: .8rem; color: var(--blue); font-weight: 600; margin: 0; }

/* ---- Media wall -----------------------------------------------------------
   Curated by the admin: Instagram and Facebook embeds now need a Meta app
   token, so we paste the post URL and a thumbnail instead. Same "keep users
   inside the site" effect, zero API dependency.
   -------------------------------------------------------------------------- */

.mwall {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.mitem {
  border: 1px solid var(--grey-200); border-radius: var(--r-lg);
  overflow: hidden; background: var(--white); color: inherit; display: block;
}
.mitem:hover { text-decoration: none; box-shadow: var(--shadow-lg); }
.mitem__thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mitem__body { padding: var(--s3) var(--s4) var(--s4); }
.mitem__src { font-size: .78rem; font-weight: 600; color: var(--blue); text-transform: uppercase; }
.mitem__cap { font-size: .9rem; margin: var(--s2) 0 0; }

/* YouTube keeps its real embed — no token needed, and testimonials are the
   one place a real video beats a thumbnail. */
.video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden; background: var(--navy-deep);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Group figures band ---------------------------------------------------- */

.mstats {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
@media (max-width: 620px) { .mstats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Filter bar ------------------------------------------------------------
   Moved to css/main.css — the patient dashboard uses the same chips and does
   not load this file. */

/* ---- Why Medipol Mega ------------------------------------------------------
   The building, the ward and the two accreditations. These replaced four cards
   that asserted qualities without showing any — a photograph of the place and
   a scan of the certificate are the argument.
   -------------------------------------------------------------------------- */

.megashots, .certs {
  display: grid; gap: var(--s4); margin-top: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .megashots, .certs { grid-template-columns: repeat(2, 1fr); }
}
.megashots figure, .certs figure { margin: 0; }
.megashots img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--e2, var(--shadow-lg));
}
/* A certificate is a document: it is read, not cropped. `contain` on a light
   plate rather than `cover`, which would cut the seal off. */
.certs img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--white); padding: var(--s4);
  border: 1px solid var(--grey-200); border-radius: var(--r-lg);
}
.certs--lg img { aspect-ratio: 3 / 4; }
.megashots figcaption, .certs figcaption {
  margin-top: var(--s2); font-size: .85rem; color: var(--grey-600); text-align: center;
}

/* The hospital's own account of itself. Long — so it is set narrow and airy,
   because a 1,100-word block at full width is not read by anybody. */
.whytext { max-width: 70ch; margin-inline: auto; }
.whytext p { font-size: 1.01rem; margin-bottom: var(--s5); }
.whytext p:first-child {
  font-size: 1.13rem; color: var(--navy); font-weight: 500;
}

/* ---- Training catalogue ----------------------------------------------------
   The audience on the rail, their subject areas as cards beside it. Four across
   on a wide screen, two on a tablet, one on a phone — the same rhythm as the
   doctor grid, because it is the same kind of browsing.
   -------------------------------------------------------------------------- */

.areagrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .areagrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .areagrid { grid-template-columns: repeat(4, 1fr); } }

.area {
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r); padding: var(--s4);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.area:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--blue-line);
}
.area h4 {
  margin: 0 0 var(--s2); font-size: .95rem; color: var(--navy); line-height: 1.35;
}
/* The sub-topics: what you actually go there to learn. Small, because the
   field name is what someone scans for. */
.area p {
  margin: 0; font-size: .81rem; line-height: 1.5; color: var(--grey-600);
}

/* ---- The technology film ---------------------------------------------------
   One film at the top of the page it is about. Deliberately NOT .gvid — that
   carousel lives in css/home.css, which this page does not load, and a single
   film does not need arrows and dots.
   -------------------------------------------------------------------------- */

.techfilm { margin: var(--s7) 0 0; }
.techfilm video {
  width: 100%; display: block; background: #000;
  border-radius: var(--r-lg);
  box-shadow: var(--e2, var(--shadow-lg));
  aspect-ratio: 16 / 9; object-fit: cover;
}
.techfilm figcaption {
  margin-top: var(--s3); font-size: .9rem; color: var(--grey-600); text-align: center;
}

/* ---- Anlaşmalı kurumlar / insurers -----------------------------------------
   A list, not cards. There is one fact per row — the name — and a card grid
   around a hundred single words is decoration pretending to be structure.
   -------------------------------------------------------------------------- */

.inslist { list-style: none; padding: 0; margin: 0; }
.ins {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3) var(--s5); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--grey-200); border-radius: var(--r);
  background: var(--white);
}
.ins + .ins { margin-top: var(--s2); }
.ins:hover { border-color: var(--blue-line); background: var(--blue-soft); }
.ins__name { font-weight: 600; color: var(--navy); }
.ins__where { text-align: end; }
@media (max-width: 560px) { .ins__where { text-align: start; } }

/* The policy kind, where it says something the category heading does not. */
.ins__tag {
  display: inline-block; margin-inline-start: var(--s2);
  padding: 1px 8px; border-radius: var(--r-full);
  background: var(--grey-100); color: var(--grey-600);
  font-size: .74rem; font-weight: 500; vertical-align: middle;
}

/* ---- Actualités -------------------------------------------------------------
   Cards for the list, one column of readable measure for the article. A press
   piece is read, not scanned, so the body is capped at 68ch rather than filling
   the 1160px wrap.
   -------------------------------------------------------------------------- */

.newsgrid {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Dans la colonne de droite du répertoire il ne reste qu'environ 850 px :
   auto-fill n'y tiendrait que deux cartes. On fixe donc les colonnes, comme
   pour .docgrid, pour garder trois articles par ligne. */
.dirwrap .newsgrid { gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .dirwrap .newsgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dirwrap .newsgrid { grid-template-columns: repeat(3, 1fr); } }

.ncard {
  display: flex; flex-direction: column; color: inherit;
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.ncard:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-lg); border-color: var(--blue-line);
}
.ncard__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ncard__body { padding: var(--s4); display: grid; gap: var(--s2); }
.ncard__meta { margin: 0; font-size: .8rem; color: var(--blue); font-weight: 600; }
.ncard__title { font-size: 1.05rem; margin: 0; line-height: 1.35; }
.ncard__sum { margin: 0; font-size: .92rem; color: var(--grey-600); }
.ncard__doc { margin: 0; font-size: .84rem; color: var(--grey-400); font-weight: 500; }

.narticle { max-width: 68ch; margin-inline: auto; }
.narticle h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: var(--s3); }
.narticle p { font-size: 1.03rem; line-height: 1.75; }
.narticle__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg); margin: var(--s6) 0;
}

/* The byline is the reason to believe any of it, so it is not a footnote. */
.nbyline {
  display: grid; gap: 2px;
  padding: var(--s4); margin-top: var(--s5);
  border-inline-start: 3px solid var(--blue);
  background: var(--blue-soft); border-radius: var(--r);
}
.nbyline strong { color: var(--navy); }

/* The news toolbar: the search box takes the room, the two selects sit beside
   it. Search first because the real question is almost always one word. */
.nbar {
  display: flex; align-items: flex-end; gap: var(--s4) var(--s5);
  flex-wrap: wrap; margin-bottom: var(--s6);
}
.nbar__search { flex: 2 1 260px; margin: 0; min-width: 0; }
.nbar__search input { min-height: 46px; }