/* Practices page sections (Figma 449:1219 → 450:228). Shared sections are in sections.css. */

/* ---------- Bento: "Radiology reporting, on your terms" ---------- */
.bento { background: #fff; padding-block: 80px 120px; }
.bento .section-heading { max-width: 867px; }
.bento .section-heading__title { font-size: 44px; line-height: 1.2; }
.bento .section-heading__lede { max-width: 640px; }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(254px, auto));
  gap: 18px 20px;
  margin-top: 64px;
  grid-template-areas:
    "pool    tall      invoicing"
    "pricing access    wide";
}
.bento-card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px; color: var(--ink); }
.bento-card__head { display: grid; gap: 24px; justify-items: start; }
/* Icon in a pale tile. These cards aren't links, so hover only warms the tile (no lift, no "click me"). */
.bento-card__icon { display: inline-flex; padding: 12px; border-radius: 14px; background: var(--green-100); color: var(--green-800); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.bento-card:hover .bento-card__icon { background: var(--green-800); color: var(--green-50); }
.bento-card h3 { max-width: 320px; font-size: 28px; line-height: 1.2; }
.bento-card p { font-size: 16px; line-height: 1.4; opacity: 0.8; }
.bento-card--pool { grid-area: pool; }
.bento-card--invoicing { grid-area: invoicing; }
.bento-card--pricing { grid-area: pricing; }
/* This card sits over the bottom of the tall photo, as in the design. */
.bento-card--access { grid-area: access; position: relative; z-index: 1; background: rgb(from var(--green-25) r g b / 0.92); backdrop-filter: blur(6px); }
.bento-photo { position: relative; margin: 0; border-radius: var(--radius-image); overflow: hidden; isolation: isolate; }
.bento-photo img { width: 100%; height: 100%; object-fit: cover; }
.bento-photo::after { content: ""; position: absolute; inset: 0; background: rgb(from var(--green-800) r g b / 0.5); }
.bento-photo--tall { grid-column: 2; grid-row: 1 / span 2; } /* spans both rows; the access card overlaps its lower half */
.bento-photo--tall::after { mix-blend-mode: color; }
.bento-photo--wide { grid-area: wide; }
.bento-photo--wide::after { mix-blend-mode: darken; }

/* ---------- "Radian works with your existing RIS" ---------- */
.ris { background: var(--green-800); color: var(--green-25); padding-block: 136px 120px; }
.ris__inner { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 120px; align-items: center; }
.ris__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.ris__copy h2 { max-width: 587px; font-size: 44px; line-height: 1.2; text-box: trim-both cap alphabetic; }
.ris__copy p { font-size: 20px; line-height: 1.4; }
.ris__copy .btn { margin-top: 96px; }
.ris__visual { position: relative; margin-right: calc(-1 * var(--gutter) - 56px); }
.ris__screen { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; background: rgb(from var(--green-25) r g b / 0.15); }
.ris__screen img { width: 100%; aspect-ratio: 602 / 381; border-radius: var(--radius-image); object-fit: cover; object-position: right bottom; }
.booking-card--ris { left: 105px; bottom: -120px; scale: 0.758; transform-origin: left bottom; }

/* ---------- "Why practices choose Radian" ---------- */
.pillars { background: linear-gradient(167.06deg, var(--green-800) 3.14%, var(--green-900) 74.4%); color: var(--surface-tint); padding-block: 206px 200px; }
.pillars .section-heading__title { letter-spacing: -0.04em; }
.pillars__list { display: grid; grid-template-columns: repeat(3, minmax(0, 278px)); justify-content: center; gap: 106px; margin-top: 64px; }
.pillar { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pillar__label { padding: 16px; border: 1px solid rgb(from var(--green-25) r g b / 0.25); border-radius: 40px; background: rgb(from var(--green-950) r g b / 0.2); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.pillar h3 { font-size: 24px; line-height: 1; }
.pillar p { font-size: 16px; line-height: 1.3; color: var(--on-dark-soft); }

/* ---------- "Doctors working with us" ---------- */
.doctors { --heading: var(--heading-green); background: #fff; padding-block: 106px 120px; }
.doctors__head { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.doctors__carousel { margin-top: 64px; }
.doctors__carousel .carousel__track { --card-width: calc((100% - 2 * 18px) / 3); }
.doctors__carousel .carousel__controls { justify-content: space-between; }
.network-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  min-height: 262px;
  padding: 32px;
  border-radius: 16px;
  color: var(--green-975);
  transition: border-color 0.15s, background-color 0.15s;
}
.network-card:hover { border-color: var(--green-600); background: rgb(from var(--green-100) r g b / 0.5); }
.network-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.network-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.network-card__tags .chip { padding: 4px 8px; background: var(--mint); color: var(--green-975); }
.network-card__person { display: flex; align-items: center; gap: 8px; }
.network-card__person img { flex-shrink: 0; width: 55px; height: 55px; border-radius: 50%; object-fit: cover; } /* never squashed by a long name */
.network-card__person strong { display: block; font-weight: 400; font-size: 28px; line-height: 1.1; }
.network-card__person small { display: block; margin-top: 4px; font-size: 16px; line-height: 1.4; }
.network-card__location { display: flex; align-items: center; gap: 4px; margin-top: auto; font-size: 16px; line-height: 1.4; opacity: 0.8; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .bento, .ris, .pillars, .doctors { padding-block: var(--section-space); }
  .bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "pool invoicing" "tall tall" "pricing access" "wide wide";
  }
  .bento-photo--tall { grid-area: tall; aspect-ratio: 16 / 9; }
  .bento-photo--wide { aspect-ratio: 16 / 9; }
  .ris__inner { grid-template-columns: 1fr; gap: 64px; }
  .ris__copy .btn { margin-top: 8px; }
  .ris__visual { margin-right: 0; }
  .ris .float-chip, .booking-card--ris { display: none; }
  .pillars__list { grid-template-columns: 1fr; gap: 56px; }
  .doctors__carousel .carousel__track { --card-width: calc((100% - 18px) / 2); }
}
@media (max-width: 760px) {
  .bento__grid { grid-template-columns: 1fr; grid-template-areas: "pool" "tall" "invoicing" "pricing" "access" "wide"; }
  .bento .section-heading__title, .ris__copy h2 { font-size: 32px; }
  .bento-card h3 { font-size: 24px; }
  .ris__copy p { font-size: 17px; }
  .doctors__carousel .carousel__track { --card-width: 86vw; }
  .network-card__person strong { font-size: 22px; }
}