/* ══════════════════════════════════════════════
   HOSPITAIS PAGE — Dr. Kaiser Jr.
   Components specific to the hospitals page
   ══════════════════════════════════════════════ */

/* ── Hero Internal (hospitals) ── */
/* Usa o padrão .hero hero--internal com foto do Einstein, texto centralizado */
.hero--hospitals .hero__bg img {
  object-position: center center;
  filter: brightness(0.75);
}

.hero--hospitals .hero__overlay {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(14,21,34,0.55) 0%, rgba(14,21,34,0.8) 70%, var(--navy-900) 100%),
    linear-gradient(to bottom, var(--navy-900) 0%, rgba(14,21,34,0.4) 20%, rgba(14,21,34,0.4) 80%, var(--navy-900) 100%);
}

.hero--hospitals .hero__content .hero__title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.4);
}
.hero--hospitals .hero__content .hero__subtitle {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

@media (min-width: 900px) {
  .hero--hospitals .hero__content {
    text-align: center;
  }
  .hero--hospitals .hero__content .breadcrumb {
    justify-content: center;
  }
  .hero--hospitals .hero__content .hero__eyebrow {
    justify-content: center;
  }
  .hero--hospitals .hero__content .hero__eyebrow::before {
    display: none;
  }
  .hero--hospitals .hero__content .hero__rule {
    margin-left: auto;
    margin-right: auto;
  }
  .hero--hospitals .hero__content .hero__subtitle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── City Divider ── */
.city-divider {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.city-divider:not(:first-child) {
  margin-top: var(--space-24);
}
.city-divider__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}
.city-divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.city-divider__count {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  color: var(--gray-500);
  white-space: nowrap;
}

/* ── Hospital Cards Grid ── */
.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.hospitals-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Hospital Card ── */
.hcard {
  background: var(--dark-card);
  border: 1px solid rgba(181,140,94,.06);
  border-top: 2px solid transparent;
  border-radius: 4px;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-hover);
  position: relative;
  overflow: hidden;
}
.hcard::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out-expo);
}
.hcard:hover::before {
  transform: scaleX(1);
}
.hcard:hover {
  border-color: rgba(181,140,94,.15);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.hcard--featured {
  background: linear-gradient(135deg, var(--dark-card) 0%, rgba(181,140,94,.04) 100%);
  border-color: rgba(181,140,94,.12);
}
.hcard--kaiser {
  background: linear-gradient(135deg, var(--navy-950) 0%, rgba(181,140,94,.06) 100%);
  border-color: rgba(181,140,94,.18);
}

/* ── Hospital Card Photo ── */
.hcard__photo {
  margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-10)) var(--space-8);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.hcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.52) contrast(1.08) saturate(.85);
  transition: filter .5s ease, transform .6s var(--ease-out-expo);
}
.hcard:hover .hcard__photo img {
  filter: brightness(.68) contrast(1.06) saturate(.9);
  transform: scale(1.04);
}
.hcard__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14,21,34,.1) 0%,
    rgba(14,21,34,.55) 60%,
    rgba(20,30,51,.97) 100%
  );
  pointer-events: none;
}

/* ── Hospital Card Header ── */
.hcard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.hcard__name {
  font-family: var(--font-family);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: #fff;
}
.hcard__badge {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgba(181,140,94,.25);
  padding: var(--space-1) var(--space-3);
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hcard__badge--gold {
  color: var(--gold-400);
  border-color: rgba(181,140,94,.35);
}

/* ── Hospital Card Description ── */
.hcard__desc {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-book);
  color: rgba(255,255,255,.5);
  line-height: 1.75;
  margin-bottom: var(--space-6);
  flex: 1;
}

/* ── Hospital Card Perks ── */
.hcard__perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.hcard__perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}
.hcard__perks li::before {
  content: '';
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid rgba(181,140,94,.35);
  border-radius: 50%;
  background: rgba(181,140,94,.06);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1,4 3.5,6.5 9,1' stroke='%23B58C5E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Hospital Card Divider ── */
.hcard__divider {
  height: 1px;
  background: rgba(181,140,94,.08);
  margin-bottom: var(--space-6);
}

/* ── Hospital Card Info ── */
.hcard__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hcard__info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--gray-400);
  line-height: 1.5;
}
.hcard__info-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.5;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── Hospital Card Addresses (multiple) ── */
.hcard__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hcard__address-unit {
  padding-left: var(--space-3);
  border-left: 1px solid rgba(181,140,94,.2);
}
.hcard__unit-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(181,140,94,.65);
  margin-bottom: var(--space-1);
}
.hcard__unit-text {
  font-size: var(--text-xs);
  color: var(--gray-400);
  line-height: 1.5;
}

/* ── International Patients Section ── */
.intl-section {
  background: var(--navy-800);
  border-top: 1px solid rgba(181,140,94,.08);
  border-bottom: 1px solid rgba(181,140,94,.08);
}
.intl-section .eyebrow { color: var(--gold-300); }
.intl-section h2 { color: #fff; }
.intl-section .container {
  max-width: 700px;
}
.intl-section__text {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-book);
  color: var(--gray-300);
  line-height: 1.75;
  margin-bottom: var(--space-6);
}
.intl-section__list {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
  text-align: left;
}
.intl-section__list li {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.7);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.5;
}
.intl-section__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ── Nearest Hospital Highlight ── */
.hcard--nearest {
  border-color: rgba(181,140,94,.45) !important;
  box-shadow: 0 0 0 2px rgba(181,140,94,.18), 0 20px 60px rgba(0,0,0,.4) !important;
  transform: translateY(-4px);
}
.hcard--nearest::before {
  transform: scaleX(1) !important;
}

/* ── CEP Search Section ── */
.section--cep-search {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(181,140,94,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(32,48,85,0.6) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-950, #070e1c) 0%, var(--navy-900, #0b1524) 100%);
  border-top: 1px solid rgba(181,140,94,.12);
  border-bottom: 1px solid rgba(181,140,94,.12);
  padding: var(--space-20, 5rem) 0;
  overflow: hidden;
}
.section--cep-search::before,
.section--cep-search::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,140,94,0.35), transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.section--cep-search::before { left: 0; }
.section--cep-search::after { right: 0; }

.cep-search-box {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12, 3rem) var(--space-10, 2.5rem);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(181,140,94,0.25);
  border-radius: var(--radius-lg, 16px);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cep-search-box::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(181,140,94,0.5) 0%, transparent 35%, transparent 65%, rgba(181,140,94,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.cep-search-header {
  margin-bottom: var(--space-8, 2rem);
}
.cep-search-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  justify-content: center;
  color: var(--gold-400, #d4a574);
}
.cep-search-header .eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
}
.cep-search-header h2 {
  color: #fff;
  font-size: clamp(1.625rem, 2.5vw, 2.125rem);
  font-weight: var(--font-weight-bold, 700);
  margin: var(--space-3, .75rem) 0 var(--space-4, 1rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.cep-search-header h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400, #d4a574), rgba(181,140,94,0.1));
  margin: var(--space-4, 1rem) auto 0;
}
.cep-search-header p {
  color: rgba(255,255,255,0.72);
  font-size: var(--text-base, 1rem);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 auto;
}

.cep-search-form {
  display: flex;
  gap: var(--space-3, .75rem);
  max-width: 560px;
  margin: 0 auto;
}
.cep-input {
  flex: 1;
  background: rgba(14,21,34,0.55);
  border: 1px solid rgba(181,140,94,0.35);
  border-radius: var(--radius-full, 999px);
  padding: 1rem 1.5rem;
  color: #fff;
  font-family: inherit;
  font-size: var(--text-base, 1rem);
  letter-spacing: .02em;
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.cep-input::placeholder { color: rgba(255,255,255,0.38); }
.cep-input:focus {
  border-color: var(--gold-400, #d4a574);
  background: rgba(14,21,34,0.75);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 0 0 4px rgba(181,140,94,0.15);
}
.cep-search-form .btn {
  border-radius: var(--radius-full, 999px);
  padding-left: var(--space-6, 1.5rem);
  padding-right: var(--space-6, 1.5rem);
}
.cep-result { margin-top: var(--space-8, 2rem); text-align: left; }
.cep-loading {
  color: var(--gray-400, #9ca3af);
  font-size: var(--text-sm, .875rem);
  text-align: center;
  padding: var(--space-4, 1rem);
}
.cep-error {
  color: #f87171;
  font-size: var(--text-sm, .875rem);
  text-align: center;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  background: rgba(248,113,113,.06);
  border: 1px solid rgba(248,113,113,.15);
  border-radius: 4px;
}
.cep-found {
  background: rgba(181,140,94,.04);
  border: 1px solid rgba(181,140,94,.15);
  border-radius: 6px;
  padding: var(--space-8, 2rem);
}
.cep-found-location {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  font-size: var(--text-xs, .75rem);
  color: var(--gray-500, #6b7280);
  margin-bottom: var(--space-6, 1.5rem);
  line-height: 1.5;
}
.cep-found-location svg { stroke: var(--color-accent, #b58c5e); flex-shrink: 0; }
.cep-nearest {
  background: linear-gradient(135deg,rgba(181,140,94,.09),rgba(181,140,94,.03));
  border: 1px solid rgba(181,140,94,.25);
  border-radius: 4px;
  padding: var(--space-6, 1.5rem);
  margin-bottom: var(--space-6, 1.5rem);
}
.cep-nearest-label {
  font-size: var(--text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-accent, #b58c5e);
  margin-bottom: var(--space-3, .75rem);
}
.cep-nearest-name {
  font-family: var(--font-family, inherit);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-1, .25rem);
}
.cep-nearest-city {
  font-size: var(--text-sm, .875rem);
  color: var(--gray-400, #9ca3af);
  margin-bottom: var(--space-3, .75rem);
}
.cep-nearest-dist {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-accent, #b58c5e);
}
.cep-all {
  border-top: 1px solid rgba(181,140,94,.08);
  padding-top: var(--space-6, 1.5rem);
  margin-bottom: var(--space-6, 1.5rem);
}
.cep-all-title {
  font-size: var(--text-xs, .75rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
  margin-bottom: var(--space-4, 1rem);
}
.cep-rank {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: var(--text-sm, .875rem);
}
.cep-rank:last-child { border-bottom: none; }
.cep-rank-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: var(--gray-400, #9ca3af);
  flex-shrink: 0;
}
.cep-rank--first .cep-rank-num {
  background: rgba(181,140,94,.15);
  border-color: rgba(181,140,94,.35);
  color: var(--color-accent, #b58c5e);
}
.cep-rank-name { flex: 1; color: var(--gray-300, #d1d5db); }
.cep-rank--first .cep-rank-name { color: #fff; font-weight: 500; }
.cep-rank-dist { color: var(--gray-500, #6b7280); font-size: var(--text-xs, .75rem); }
.cep-rank--first .cep-rank-dist { color: var(--color-accent, #b58c5e); font-weight: 600; }

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST (Hospitais)
   ══════════════════════════════════════════════ */

/* ── CEP mobile ── */
.cep-search-form { flex-direction: column; }
.cep-nearest-name { font-size: var(--text-xl, 1.25rem); }

/* ── Base mobile ── */
.hospitals-grid,
.hospitals-grid--3 {
  grid-template-columns: 1fr;
}
.hcard {
  padding: var(--space-6);
}
.hcard__photo {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-6);
}
.hcard__name {
  font-size: var(--text-xl);
}
.city-divider:not(:first-child) {
  margin-top: var(--space-16);
}
.city-divider {
  margin-bottom: var(--space-8);
}

/* ── sm: 600px+ ── */
@media (min-width: 600px) {
  .cep-search-form { flex-direction: row; }
  .cep-nearest-name { font-size: var(--text-2xl, 1.5rem); }
  .hospitals-grid,
  .hospitals-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hcard {
    padding: var(--space-8);
  }
  .hcard__photo {
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
  }
}

/* ── md: 1024px+ ── */
@media (min-width: 1024px) {
  .hospitals-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hcard {
    padding: var(--space-10);
  }
  .hcard__photo {
    margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-10)) var(--space-8);
  }
  .hcard__name {
    font-size: var(--text-2xl);
  }
  .city-divider:not(:first-child) {
    margin-top: var(--space-24);
  }
  .city-divider {
    margin-bottom: var(--space-12);
  }
}