/* ============================================================
   IOSA — shared components for inner pages (not the home page)
   ============================================================ */

.page-hero {
  background: var(--ink-950);
  color: #fff;
  padding-top: 156px;
  padding-bottom: clamp(48px, 7vw, 84px);
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); max-width: 20ch; }
.page-hero p { color: #cdd9d9; max-width: 56ch; margin-top: 18px; font-size: 1.05rem; }
.page-hero .breadcrumb { margin-bottom: 20px; }

/* ---- doctor profile (Quem Somos) ---- */
.doctor {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding: clamp(40px, 6vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}
.doctor:last-child { border-bottom: none; }
.doctor-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; max-width: 210px; }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-role { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--emerald-deep); margin-bottom: 10px; display: block; }
.doctor h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 16px; }
.doctor ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.doctor li { font-size: 0.95rem; color: var(--ink-soft); padding-left: 22px; position: relative; }
.doctor li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.doctor .doctor-quote {
  margin-top: 22px;
  padding: 22px 26px;
  background: var(--emerald-tint);
  border-radius: var(--r-md);
  border-left: 3px solid var(--emerald);
}
.doctor .doctor-quote p { color: var(--emerald-deep); font-style: normal; margin: 0; font-size: 0.98rem; }
.doctor .doctor-email { margin-top: 18px; }
.doctor .doctor-email a { color: var(--emerald-deep); font-weight: 600; font-size: 0.92rem; }

@media (max-width: 760px) {
  .doctor { grid-template-columns: 1fr; }
  .doctor-photo { max-width: 190px; }
}

/* ---- service detail rows ---- */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 5vw, 56px);
  padding: clamp(40px, 6vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}
.service-row:last-child { border-bottom: none; }
.service-row h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.service-row .service-index { font-family: var(--font-mono); color: var(--ink-faint); font-size: 0.85rem; margin-bottom: 10px; display: block; }
@media (max-width: 760px) {
  .service-row { grid-template-columns: 1fr; }
}

/* ---- tech card grid (tecnologia hub) ---- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tech-grid--pair { grid-template-columns: repeat(2, 1fr); }
.tech-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  border-top: 3px solid var(--emerald);
  display: flex;
  flex-direction: column;
}
.tech-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.tech-card p { margin-bottom: 20px; flex: 1; }
@media (max-width: 900px) { .tech-grid { grid-template-columns: 1fr; } }

/* ---- article-style content (tech detail pages) ---- */
.article { max-width: 720px; }
.article h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 40px 0 16px; }
.article h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.article p { margin-bottom: 18px; font-size: 1.02rem; }
.article .lede { font-size: 1.15rem; color: var(--ink); }

/* ---- press grid (imprensa page, full) ---- */
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.press-grid .press-card { flex: none; }
@media (max-width: 980px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .press-grid { grid-template-columns: 1fr; } }

/* ---- case note (imprensa clinical cases, no photo available) ---- */
.case-note {
  background: var(--porcelain-dim);
  border-radius: var(--r-lg);
  padding: 28px 32px;
}
.case-note .doctor-role { margin-bottom: 8px; }
.case-note h4 { font-size: 1.05rem; margin-bottom: 8px; }

/* ---- convenios grid ---- */
.convenio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.convenio-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 128px;
}
.convenio-tile img { max-width: 100%; max-height: 44px; width: auto; object-fit: contain; }
.convenio-tile span { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; }
@media (max-width: 760px) { .convenio-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- contact layout ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 56px); }
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.contact-card h3 { font-size: 1rem; margin-bottom: 8px; }
.contact-card a { color: var(--emerald-deep); font-weight: 600; }
.contact-map { border-radius: var(--r-lg); overflow: hidden; min-height: 420px; }
.contact-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }