/* ═══════════════════════════════════════════════════════════
   Info Pages — Shared Layout Styles
   Used by: dc-avaliacao, dc-seguranca, dc-alimentacao, dc-saude,
            spa-banho, spa-tosa, spa-pelagem,
            t-obediencia, t-reabilitacao, t-consulta,
            h-rotina, h-avaliacao
   ═══════════════════════════════════════════════════════════ */

/* ─── Horizontal Scroll Base ──────────────────────────────── */
.info_page .gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
}

.info_page .gallery > section {
  flex-shrink: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 4rem 2rem !important;
  position: relative !important;
}

/* ─── Section 1: Hero ─────────────────────────────────────── */
.info_hero {
  background: linear-gradient(135deg, rgba(253,208,37,0.08) 0%, rgba(118,165,175,0.04) 50%, rgba(54,101,110,0.06) 100%) !important;
}

.info_hero_inner {
  display: flex !important;
  align-items: center !important;
  gap: 4rem !important;
  max-width: 80rem !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.info_hero_content {
  flex: 1 !important;
  min-width: 0 !important;
}

.info_hero_label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--clr-teal) !important;
  margin-bottom: 1.5rem !important;
}

.info_hero_label .material-symbols-outlined {
  font-size: 1.25rem !important;
}

.info_hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  font-weight: 800 !important;
  color: var(--clr-ink) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem !important;
}

.info_hero h1 em {
  font-style: italic !important;
  color: var(--clr-yellow) !important;
}

.info_hero_desc {
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: var(--clr-ink-muted) !important;
  max-width: 35rem !important;
  margin-bottom: 2rem !important;
}

.info_scroll_hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--clr-apricot) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.info_scroll_hint .material-symbols-outlined {
  animation: scrollHint 1.5s ease-in-out infinite !important;
}

@keyframes scrollHint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.5rem); }
}

.info_hero_image {
  flex-shrink: 0 !important;
  width: 28rem !important;
  aspect-ratio: 3/4 !important;
  border-radius: 2rem !important;
  overflow: hidden !important;
  box-shadow: 0 32px 64px -20px rgba(27,28,23,0.15) !important;
  position: relative !important;
}

.info_hero_image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(253,208,37,0.15) 0%, transparent 50%) !important;
  border-radius: 2rem !important;
}

.info_hero_image figure {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ─── Section 2: Cards + Info ─────────────────────────────── */
.info_info {
  background: var(--clr-white) !important;
  justify-content: flex-start !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  border-radius: var(--radius-xl) !important;
}

/* Force every direct text element to wrap, no matter what */
.info_info p, .info_info h1, .info_info h2, .info_info h3,
.info_cta p, .info_cta h1, .info_cta h2, .info_cta h3 {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.info_info_inner {
  max-width: 60rem !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.info_info_header {
  text-align: center !important;
  margin-bottom: 3rem !important;
}

.info_info_header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--clr-ink) !important;
  margin-bottom: 1rem !important;
}

.info_info_header .accent_line {
  display: none !important;
}

.info_info_header p {
  font-size: 1.1rem !important;
  color: var(--clr-ink-muted) !important;
  max-width: 35rem !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.info_cards_stack {
  display: grid !important;
  /* minmax(0, 1fr) permits the columns to shrink to fit the parent container, avoiding overflow */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-bottom: 3rem !important;
}

/* Timeline: 2 rows (4 columns) */
#horario-info .info_cards_stack {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
/* Wider contents and cards for timeline */
#horario-info + .contents_div,
#horario-info .info_cards_stack {
  max-width: 100% !important;
  width: 100% !important;
}
#horario-info .info_card {
  min-width: 280px !important;
  padding: 1.5rem !important;
  height: 100% !important;
  align-self: stretch !important;
}
#horario-info .info_cards_stack {
  grid-auto-rows: 1fr !important;
}

/* On smaller desktops/laptops, drop to 2 columns to protect text legibility */
@media (max-width: 1440px) {
  .info_cards_stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.info_card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 2rem !important;
  background: var(--clr-surface-low) !important;
  border-radius: 1.5rem !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  min-height: 0 !important;
  min-width: 0 !important; /* CRÍTICO para grids no Safari encolherem */
  max-width: 100% !important; /* Impede vazamento forçado */
}

/* Fix text overflowing out of the card by explicitly bounding the inner content wrapper */
.info_card > div:not(.info_card_icon) {
  width: 100% !important;
  flex: 1 !important; /* Take remaining space */
  min-width: 0 !important; /* Overrides flexbox default min-width: auto */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.info_card:hover {
  transform: translateY(-0.25rem) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

.info_card_icon {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.info_card.teal .info_card_icon {
  background: rgba(54,101,110,0.12) !important;
  color: var(--clr-teal) !important;
}

.info_card.terracotta .info_card_icon {
  background: rgba(144,76,43,0.12) !important;
  color: var(--clr-apricot) !important;
}

.info_card.sunflower .info_card_icon {
  background: rgba(253,208,37,0.2) !important;
  color: var(--clr-yellow-accent) !important;
}

.info_card_icon .material-symbols-outlined {
  font-size: 1.5rem !important;
}

.info_card h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--clr-ink) !important;
  margin-bottom: 0 !important;
}

.info_card p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--clr-ink-muted) !important;
}

/* ─── Requirements List (health_ pages only) ──────────────── */
.health_req_title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--clr-ink) !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}

.health_req_list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
}

.health_req_list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  background: var(--clr-surface-low) !important;
  border-radius: 0.75rem !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: var(--clr-ink-muted) !important;
}

.health_req_list li .material-symbols-outlined {
  font-size: 1.1rem !important;
  color: var(--clr-teal) !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important;
}

.health_req_list li strong {
  color: var(--clr-ink) !important;
}

/* ─── Section 3: CTA + Buttons ────────────────────────────── */
.info_cta {
  display: none !important;
}

.info_cta_inner {
  max-width: 50rem !important;
  margin: 0 auto !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: var(--space-8) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card-h) !important;
}

.info_cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--clr-ink) !important;
  margin-bottom: 1rem !important;
  line-height: 1.2 !important;
}

.info_cta p {
  font-size: 1.15rem !important;
  color: var(--clr-ink-muted) !important;
  margin-bottom: 2.5rem !important;
  line-height: 1.6 !important;
}

.info_cta_buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  justify-content: center !important;
  margin-bottom: 4rem !important;
}

.info_related {
  padding-top: 2rem !important;
  border-top: 1px solid rgba(209,198,172,0.3) !important;
}

.info_related p {
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--clr-ink-muted) !important;
  opacity: 0.5 !important;
  margin-bottom: 1rem !important;
}

.info_related_links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
}

/* ─── Mobile (< 1024px) ───────────────────────────────────── */
@media (max-width: 1023.98px) {
  .info_page .gallery > section {
    width: 100vw !important;
    min-height: auto !important;
    padding: 3rem 1.5rem !important;
  }
  .info_hero_inner {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .info_hero_image {
    width: 100% !important;
    max-width: 20rem !important;
    aspect-ratio: 4/3 !important;
  }
  .info_cards_stack {
    grid-template-columns: 1fr !important;
  }
  .health_req_list {
    grid-template-columns: 1fr !important;
  }
  .info_info {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}