/* ==========================================================================
   Batch P4 — Clinic hub "Medical services" design pitch (3 options)
   Everything under .oic26-root, classes prefixed oic26-.
   ========================================================================== */

/* --- Option switcher bar ------------------------------------------------- */
.oic26-optsw {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 28px; padding-bottom: 4px;
}
.oic26-optsw-link {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; font-family: 'Manrope', sans-serif;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--oic26-border);
  background: #fff; color: var(--oic26-navy);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.oic26-optsw-link:hover { background: var(--oic26-blue-tint); border-color: transparent; color: var(--oic26-navy); }
.oic26-optsw-link--current, .oic26-optsw-link--current:hover {
  background: var(--oic26-navy); border-color: var(--oic26-navy); color: #fff;
}

.oic26-section-tag {
  font-size: 15px; color: var(--oic26-text-soft); margin-top: 6px; max-width: 640px;
}

/* --- Shared banner grid (options A + B) -----------------------------------
   Compact 3x3 grid, matching the live hub's rhythm: small gaps, no flagship,
   every card the same size. ~400px wide (3 columns) x 310px tall. */
.oic26-svcgrid {
  padding: 44px var(--oic26-gutter) 90px;
  max-width: var(--oic26-container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px; row-gap: 48px;
}
.oic26-svcbanner {
  position: relative; overflow: visible;
  border-radius: 14px; text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 310px;
}

.oic26-svcbanner-bg {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
}
.oic26-svcbanner--tint-blue .oic26-svcbanner-bg { background: linear-gradient(150deg, var(--oic26-blue-tint) 0%, #eaf6fb 100%); }
.oic26-svcbanner--tint-green .oic26-svcbanner-bg { background: linear-gradient(150deg, var(--oic26-green-tint) 0%, #eef8e6 100%); }
.oic26-svcbanner--navy .oic26-svcbanner-bg { background: linear-gradient(160deg, #24466a 0%, #1f3b57 55%, #16283b 100%); }

.oic26-svcbanner-ring {
  position: absolute; border-radius: 50%;
  border: 26px solid rgba(255,255,255,0.35);
}
.oic26-svcbanner--navy .oic26-svcbanner-ring { border-color: rgba(255,255,255,0.08); }
.oic26-svcbanner-ring--a { width: 65%; padding-top: 65%; right: -22%; top: -28%; }
.oic26-svcbanner-ring--b { width: 34%; padding-top: 34%; left: -10%; bottom: -16%; border-width: 18px; }

/* Text column: capped so it can never collide with the visual on the right. */
.oic26-svcbanner-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 20px 20px; width: 46%;
}
.oic26-svcbanner-body h3 { font-size: 28px; line-height: 1.08; color: var(--oic26-navy); }
.oic26-svcbanner-body p { font-size: 15px; line-height: 1.4; color: var(--oic26-text-soft); }
.oic26-svcbanner--navy .oic26-svcbanner-body h3 { color: #fff; }
.oic26-svcbanner--navy .oic26-svcbanner-body p { color: #d8e6f0; }
.oic26-svcbanner-body .oic26-link-arrow { font-size: 14px; font-weight: 700; color: inherit; margin-top: 2px; }

/* --- Option A: person cutouts ----------------------------------------------
   Wrapper is pushed up above the card by a small negative top inset and
   clips at its own box: legs cut off at the card's bottom edge, only the
   head (and a little shoulder) rises above the card's top edge. */
.oic26-svcbanner-figurewrap {
  position: absolute; inset: -40px 0 0 0; z-index: 1;
  overflow: hidden; border-radius: 0 0 14px 14px; pointer-events: none;
}
.oic26-svcbanner-figure {
  position: absolute; bottom: 0; right: 1%;
  height: 100%; width: auto;
}

/* Wide / crossed-arm poses: pushed further right (part of the far arm crops
   off the card edge) instead of shrunk, so every card still gets the same
   ~40px head overflow. Three tiers by how wide the pose actually is. */
.oic26-svcbanner-figurewrap--wide-a .oic26-svcbanner-figure { right: -3%; }
.oic26-svcbanner-figurewrap--wide-b .oic26-svcbanner-figure { right: -12%; }
.oic26-svcbanner-figurewrap--wide-c .oic26-svcbanner-figure { right: -26%; }

/* --- Option B: signature-object SVGs ----------------------------------------
   Cropped by the card on purpose: the object bleeds slightly off the
   bottom-right corner, large relative to the card, with a soft glow. */
.oic26-svcbanner--obj { overflow: hidden; }
.oic26-svcbanner-objectzone {
  position: absolute; z-index: 1; right: -7%; bottom: -7%;
  width: 54%; max-width: 220px; min-width: 190px; pointer-events: none;
}
.oic26-svcbanner-object-glow {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 68%);
  filter: blur(4px);
}
.oic26-svcbanner--navy .oic26-svcbanner-object-glow {
  background: radial-gradient(circle, rgba(176,208,136,0.4) 0%, rgba(128,192,232,0) 68%);
}
.oic26-svcbanner-object { position: relative; display: block; width: 100%; height: auto; }

/* --- Option C: editorial photo mosaic ------------------------------------- */
.oic26-photogrid {
  padding: 22px var(--oic26-gutter) 90px;
  max-width: var(--oic26-container); margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
}
.oic26-photorow { display: grid; gap: 22px; }
.oic26-photorow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oic26-photorow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.oic26-photobanner {
  position: relative; display: block; overflow: hidden;
  border-radius: 14px; text-decoration: none;
  height: 400px;
}
.oic26-photobanner--full { height: 520px; }
.oic26-photorow--2 .oic26-photobanner { height: 440px; }

.oic26-photobanner-media { position: absolute; inset: 0; }
.oic26-photobanner-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.oic26-photobanner:hover .oic26-photobanner-media img,
.oic26-photobanner:focus-visible .oic26-photobanner-media img {
  transform: scale(1.06);
}
/* Crisp, bright faces up top; legible navy scrim under the (now much taller)
   text block. No competing figure here, so the text column is wide, which
   keeps titles to 1-2 lines and keeps the whole block inside the scrim. */
.oic26-photobanner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,59,87,0) 0%, rgba(31,59,87,0) 40%, rgba(31,59,87,0.88) 100%);
}
.oic26-photobanner-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 8px;
  width: 82%;
}
.oic26-photobanner-body h3 { font-size: 40px; line-height: 1.05; color: #fff; }
.oic26-photobanner--full .oic26-photobanner-body { padding: 34px 40px; width: 62%; }
.oic26-photobanner--full .oic26-photobanner-body h3 { font-size: 56px; }
.oic26-photobanner-body p { font-size: 16px; color: #d8e6f0; }
.oic26-photobanner-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.5);
  color: #fff; font-size: 15px; font-weight: 700; margin-top: 6px;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .oic26-svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oic26-photorow--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .oic26-photobanner-body, .oic26-photobanner--full .oic26-photobanner-body { width: 56%; }
}
@media (max-width: 600px) {
  .oic26-svcgrid { grid-template-columns: 1fr; column-gap: 18px; row-gap: 44px; padding-top: 40px; }
  .oic26-svcbanner-body { padding: 0 18px 18px; width: 42%; }
  .oic26-svcbanner-body h3 { font-size: 25px; }
  .oic26-svcbanner-body p { font-size: 14px; }

  .oic26-svcbanner-figurewrap { inset: -34px 0 0 0; }
  .oic26-svcbanner-figure { right: -4%; }
  .oic26-svcbanner-figurewrap--wide-a .oic26-svcbanner-figure { right: -8%; }
  .oic26-svcbanner-figurewrap--wide-b .oic26-svcbanner-figure { right: -20%; }
  .oic26-svcbanner-figurewrap--wide-c .oic26-svcbanner-figure { right: -34%; }

  .oic26-svcbanner-objectzone { width: 50%; max-width: 190px; min-width: 160px; }

  .oic26-photogrid { padding-top: 14px; gap: 16px; }
  .oic26-photorow--3, .oic26-photorow--2 { grid-template-columns: 1fr; }
  .oic26-photobanner, .oic26-photorow--2 .oic26-photobanner { height: 300px; }
  .oic26-photobanner--full { height: 340px; }
  .oic26-photobanner-body, .oic26-photobanner--full .oic26-photobanner-body { width: 68%; padding: 20px; }
  .oic26-photobanner-body h3 { font-size: 30px; }
  .oic26-photobanner--full .oic26-photobanner-body h3 { font-size: 36px; }
  .oic26-photobanner-body p { font-size: 14px; }
}

/* Supervisor tweaks: keep titles off faces on the small photo cards */
.oic26-photorow--3 .oic26-photobanner-body h3 { font-size: 30px; }
.oic26-photorow--3 .oic26-photobanner-body p { font-size: 14px; }
@media (max-width: 768px) {
  .oic26-photobanner, .oic26-photobanner--full, .oic26-photorow--2 .oic26-photobanner { height: 470px; }
  .oic26-photobanner-media img { object-position: 50% 0% !important; height: 72%; }
  .oic26-photobanner-media { background: #1f3b57; }
  .oic26-photobanner-scrim { background: linear-gradient(180deg, rgba(31,59,87,0) 0%, rgba(31,59,87,0) 45%, rgba(31,59,87,1) 72%, rgba(31,59,87,1) 100%); }
  .oic26-photobanner-body, .oic26-photobanner--full .oic26-photobanner-body { width: 100%; padding: 20px 22px; }
  .oic26-photobanner-body h3, .oic26-photobanner--full .oic26-photobanner-body h3 { font-size: 28px; }
}
/* Option B has no overflowing heads: rows as tight as columns */
.oic26-svcgrid.oic26-svcgrid--tight { row-gap: 22px; }
@media (max-width: 600px) { .oic26-svcgrid.oic26-svcgrid--tight { row-gap: 18px; padding-top: 22px; } }