/* ═══════════════════════════════════════════════════════════
   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: #36656E !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: #1B1C17 !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem !important;
}

.info_hero h1 em {
  font-style: italic !important;
  color: #FDD025 !important;
}

.info_hero_desc {
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: #4D4633 !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: #904C2B !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: #FFFFFF !important;
  justify-content: flex-start !important;
  padding-top: 6rem !important;
  padding-bottom: 6rem !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(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #1B1C17 !important;
  margin-bottom: 1rem !important;
}

.info_info_header .accent_line {
  width: 4rem !important;
  height: 0.25rem !important;
  background: #FDD025 !important;
  border-radius: 2rem !important;
  margin: 0 auto 1.5rem !important;
}

.info_info_header p {
  font-size: 1.1rem !important;
  color: #4D4633 !important;
  max-width: 35rem !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.info_cards_stack {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  margin-bottom: 3rem !important;
}

.info_card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 2rem !important;
  background: #F5F4EB !important;
  border-radius: 1.5rem !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  min-height: 0 !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: #36656E !important;
}

.info_card.terracotta .info_card_icon {
  background: rgba(144,76,43,0.12) !important;
  color: #904C2B !important;
}

.info_card.sunflower .info_card_icon {
  background: rgba(253,208,37,0.2) !important;
  color: #725c00 !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: #1B1C17 !important;
  margin-bottom: 0 !important;
}

.info_card p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #4D4633 !important;
}

/* ─── Requirements List (health_ pages only) ──────────────── */
.health_req_title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1B1C17 !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: #F5F4EB !important;
  border-radius: 0.75rem !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #4D4633 !important;
}

.health_req_list li .material-symbols-outlined {
  font-size: 1.1rem !important;
  color: #36656E !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important;
}

.health_req_list li strong {
  color: #1B1C17 !important;
}

/* ─── Section 3: CTA + Buttons ────────────────────────────── */
.info_cta {
  background: linear-gradient(180deg, rgba(253,208,37,0.06) 0%, rgba(118,165,175,0.04) 100%) !important;
  text-align: center !important;
}

.info_cta_inner {
  max-width: 50rem !important;
  margin: 0 auto !important;
}

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

.info_cta p {
  font-size: 1.15rem !important;
  color: #4D4633 !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: #4D4633 !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;
  }
}