/* OBSTETRIC ARTICLES PAGE («Μαιευτικά Άρθρα», LIVE /maieytika-arthra/). Loaded after tokens.css + site-chrome.css
   (locked global header/footer, untouched here). Owner rules (2026-09-28): content locked, presentation free, a real and
   compact hero with its own personality, no search/filter, rows aligned, mobile separation and contrast.
   Personality: warm and human. Hero (owner correction) = the title on the beige (blush → cream) field; the photograph of
   a newborn asleep in a parent's hand spans the full hero height on the right and melts into the beige.
   Articles = calm horizontal cards (image beside the title) in two columns; one column below 900px. */
:root{--oa-gutter:clamp(20px,4vw,72px);--oa-max:1180px}
.page-maieftika-arthra .callband{margin:0}

/* ---------- hero ---------- */
.oh{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(ellipse 40% 70% at 100% 100%,rgba(5,116,133,.16) 0%,rgba(5,116,133,0) 70%),
             radial-gradient(ellipse 35% 60% at 18% 0%,rgba(232,201,90,.2) 0%,rgba(232,201,90,0) 70%),
             linear-gradient(120deg,#F6E8E2 0%,#FBF6F0 48%,#F0E4D7 100%)}
.oh__in{width:min(100% - 2 * var(--oa-gutter),var(--oa-max));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;min-height:clamp(380px,32vw,460px);padding:clamp(34px,3.6vw,56px) 0 clamp(44px,4.4vw,68px)}
.oh .crumbs ol{color:#6B5F58;margin-bottom:clamp(12px,1.4vw,18px)}
.oh .crumbs a{color:var(--petrol);text-decoration-color:rgba(5,116,133,.35);text-underline-offset:3px}
.oh .crumbs a:hover{color:var(--petrol-d)}
.oh__h{margin:0;font-size:clamp(36px,4.2vw,64px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--fw-h);color:var(--ink)}
.oh__h::after{content:"";display:block;width:60px;height:3px;border-radius:3px;background:var(--gold);margin-top:clamp(16px,1.8vw,24px)}
/* owner correction (2026-09-28): the newborn photograph spans the full height of the hero on the right (as first
   composed for the maternity page), melting into the beige field; no frame, no separate piece */
.oh__art{position:absolute;top:0;bottom:0;right:0;width:64%;z-index:-1;
  -webkit-mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 20%,#000 40%);mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 20%,#000 40%)}
.oh__ph{position:absolute;inset:0;margin:0}
.oh__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.oh__frame,.oh__blob{display:none}

/* ---------- articles: horizontal cards ---------- */
.oa{background:linear-gradient(180deg,#FBF7F3 0%,#fff 40%);padding:clamp(40px,4.6vw,76px) 0 clamp(64px,7vw,112px)}
.oa__list{list-style:none;margin:0 auto;padding:0;width:min(100% - 2 * var(--oa-gutter),var(--oa-max));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px) clamp(18px,2.2vw,30px)}
.oac{position:relative;height:100%;display:grid;grid-template-columns:40% minmax(0,1fr);background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 20px 42px -32px rgba(60,36,26,.45),0 1px 3px rgba(60,36,26,.06);transition:transform .3s var(--ease-std,ease),box-shadow .3s var(--ease-std,ease)}
.oac:hover{transform:translateY(-3px);box-shadow:0 28px 52px -30px rgba(60,36,26,.5),0 1px 3px rgba(60,36,26,.06)}
.oac:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.oac__media{min-height:150px;overflow:hidden;background:#EFE5DA}
.oac__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-std,ease)}
.oac:hover .oac__media img{transform:scale(1.05)}
.oac__body{position:relative;display:flex;flex-direction:column;justify-content:center;padding:18px 52px 18px 22px}
.oac__n{margin:0 0 6px;font-size:12px;font-weight:var(--fw-h);letter-spacing:.12em;color:var(--gold-t);font-variant-numeric:tabular-nums}
.oac__t{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.3;font-weight:var(--fw-h);letter-spacing:-.005em;color:var(--ink);transition:color .15s ease}
.oac__t a{color:inherit;text-decoration:none}
.oac__t a::after{content:"";position:absolute;inset:0}                 /* whole card = the title link (one tab stop) */
.oac__t a:focus-visible{outline:none}
.oac:hover .oac__t{color:var(--petrol)}
.oac__arr{position:absolute;right:18px;bottom:18px;color:var(--petrol);transition:transform .15s ease}
.oac:hover .oac__arr{transform:translateX(3px)}

/* ---------- tablet: one column ---------- */
@media (max-width:899px){
  .oa__list{grid-template-columns:1fr}
}
/* ---------- mobile: its own composition ---------- */
@media (max-width:767px){
  /* mobile: title on the beige field, the photograph full width below it, fading up into the beige */
  .oh{display:flex;flex-direction:column}
  .oh__in{min-height:0;padding:22px 0 26px}
  .oh .crumbs ol{margin-bottom:10px}
  .oh__h{font-size:clamp(32px,9vw,40px)}
  .oh__art{position:relative;width:calc(100% + 2 * var(--oa-gutter));margin-left:calc(-1 * var(--oa-gutter));height:auto;aspect-ratio:16/10;z-index:0;
    -webkit-mask:linear-gradient(180deg,transparent 0%,#000 26%);mask:linear-gradient(180deg,transparent 0%,#000 26%)}
  .oa{padding-top:30px}
  .oa__list{gap:14px}
  .oac{grid-template-columns:36% minmax(0,1fr);border-radius:16px}
  .oac__media{min-height:112px}
  .oac__body{padding:14px 40px 14px 14px}
  .oac__t{font-size:15.5px;line-height:1.28;hyphens:auto}
  .oac__arr{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .oac,.oac__media img,.oac__t,.oac__arr{transition:none}
  .oac:hover,.oac:hover .oac__media img{transform:none}
}