/* =========================================================
   Manids · Center Dyreklinik
   Responsive overrides
   Breakpoints:
     Tablet:       max 1100px
     Mobil:        max 768px
     Lille mobil:  max 480px
   ========================================================= */

/* ---------------------------------------------------------
   Section-CTA og floating CTA - skaler ned tidligt
   --------------------------------------------------------- */
@media (max-width: 980px) {
	.section-cta {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 32px 28px;
	}
	.section-cta__actions { justify-content: center; flex-wrap: wrap; }
}

/* ---------------------------------------------------------
   Tablet og under (max 1100px)
   --------------------------------------------------------- */
@media (max-width: 1100px) {

	/* Skjul desktop-nav, vis hamburger */
	.site-nav { display: none; }
	.hamburger { display: flex; }
	.topbar { display: none; }

	/* Header bredde reduceres på tablet til standard container-padding */
	.site-header > .container { padding: 0 var(--gutter); max-width: var(--maxw); }

	/* Single-service og page bliver én kolonne */
	.service-layout,
	.page-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.service-aside,
	.page-aside { position: static; }

	/* Service blocks grid: 1 kolonne */
	.service-blocks-grid { grid-template-columns: 1fr; }

	/* Stats: 4 -> 2 kolonner */
	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.stats-item:nth-child(2n) { border-right: 0; }

	/* Archive grid: 3 -> 2 kolonner */
	.archive-grid { grid-template-columns: repeat(2, 1fr); }
	.section--service-related .archive-grid { grid-template-columns: repeat(2, 1fr); }

	/* Om os: kolonner ned */
	.values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.equipment-layout { grid-template-columns: 1fr; gap: 36px; }

	/* Kontakt: 2 kolonner og stacked form-layout */
	.kontakt-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kontakt-form-grid { grid-template-columns: 1fr; gap: 32px; }
	.kontakt-form-aside { position: static; }
	.practical-grid { grid-template-columns: repeat(2, 1fr); }
	.kontakt-akut-card { grid-template-columns: auto 1fr; gap: 18px; }
	.kontakt-akut-card__btn { grid-column: 1 / -1; justify-content: center; width: 100%; }

	/* Quick facts: 4 -> 2 kolonner */
	.quickfacts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
	.quickfact + .quickfact { border-left: none; }
	.quickfact:nth-child(odd) ~ .quickfact:not(:nth-child(odd)) { border-left: 1px solid var(--line-soft); }

	/* Reviews: 3 -> 2 kolonner og stacked head */
	.reviews-grid { grid-template-columns: repeat(2, 1fr); }
	.reviews-head { grid-template-columns: 1fr; align-items: start; }

	/* Header CTA: behold telefonknap */
	.header-phone {
		font-size: 14px;
		padding: 10px 14px;
	}

	/* Sektioner: lidt mindre polstring */
	.section,
	.section--intro,
	.section--specialties,
	.section--services-grid,
	.section--trust,
	.section--vetplan,
	.section--local-contact,
	.section--faq,
	.section--final-cta,
	.section--service-content,
	.section--service-faq,
	.section--service-related {
		padding: 80px 0;
	}

	.section--hero,
	.section--page-hero,
	.section--service-hero {
		padding: 100px 0;
		min-height: 480px;
	}
	.page-hero__inner,
	.service-hero__inner { max-width: 100%; }

	/* Layouts der skal stable */
	.intro-grid,
	.vetplan-grid,
	.local-contact-grid,
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	/* 4-kolonne grids -> 3 eller 2 */
	.specialties-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: repeat(3, 1fr); }
	.trust-grid { grid-template-columns: repeat(2, 1fr); }
	/* Tablet: brand spænder hele bredden ovenover, og de 4 menu-kolonner deler under. */
	.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
	.footer-brand { grid-column: 1 / -1; max-width: 600px; }

	/* Footer kontakt-bar: stables på tablet */
	.footer-contact-bar { grid-template-columns: 1fr; gap: 24px; }
	.footer-contact-bar__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Contact-bar bliver 1-kolonne */
	.contact-bar-grid { grid-template-columns: 1fr; padding: 18px; }
	.contact-card + .contact-card {
		border-left: none;
		border-top: 1px solid var(--line-soft);
	}

	/* VetPlan billede flyttes ned */
	.vetplan-features { grid-template-columns: 1fr; }
	.intro-features { grid-template-columns: 1fr; }

	/* Hero CTA fylder mere */
	.hero-cta { flex-wrap: wrap; }

	/* Local contact-info polstring */
	.local-contact-info { padding: 40px 32px; }
	.local-contact-map { min-height: 380px; }
	.local-contact-map iframe { min-height: 380px; }

	/* (Service hero typografi er nu styret af samme regler som hero / page-hero ovenover) */

	/* VetPlan: 2 kolonner i features og audience */
	.vetplan-intro-grid { grid-template-columns: 1fr; gap: 48px; }
	.vetplan-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vetplan-steps { grid-template-columns: 1fr; }
	.vetplan-price-card { grid-template-columns: 1fr; padding: 44px 36px; gap: 28px; }
	.vetplan-audience-grid { grid-template-columns: 1fr; }

	/* Henvisninger: 2 kolonner */
	.henvisninger-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.henvisninger-steps { grid-template-columns: 1fr; }
	.henvisninger-intro-grid { grid-template-columns: 1fr; gap: 40px; }
	.henvisninger-intro-aside { position: static; }

	/* Page hero CTA */
	.page-hero__cta .btn { flex: 1 1 auto; min-width: 160px; }
}

/* ---------------------------------------------------------
   Mobil (max 768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {

	:root { --gutter: 20px; }

	body { font-size: 16px; }

	.section,
	.section--intro,
	.section--specialties,
	.section--services-grid,
	.section--trust,
	.section--vetplan,
	.section--local-contact,
	.section--faq,
	.section--final-cta,
	.section--service-content,
	.section--service-faq,
	.section--service-related,
	.section--archive-hero,
	.section--archive-list,
	.section--page-header,
	.section--page-content {
		padding: 64px 0;
	}

	.section--archive-hero { padding: 56px 0 32px; }

	.section--hero,
	.section--page-hero,
	.section--service-hero {
		padding: 72px 0 88px;
		min-height: 460px;
	}

	.section--contact-bar { margin-top: -40px; margin-bottom: 32px; }

	/* Hero typografi ned (gælder forside-, side- og behandlings-hero) */
	.hero-h1,
	.page-hero__title,
	.service-hero__title { font-size: clamp(30px, 7vw, 40px); }
	.hero-lead,
	.page-hero__lead,
	.service-hero__summary { font-size: 16.5px; }

	/* CTA buttons fylder hele bredden */
	.hero-cta .btn { flex: 1 1 auto; min-width: 140px; }

	/* Specialties + trust + services -> 1 eller 2 kolonner */
	.specialties-grid { grid-template-columns: 1fr; }
	.services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.trust-grid { grid-template-columns: 1fr; }
	.archive-grid { grid-template-columns: 1fr; }
	.section--service-related .archive-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.service-block { padding: 24px 22px; }
	.archive-group__header { flex-direction: column; align-items: flex-start; gap: 4px; }

	/* Quick facts: 1 kolonne */
	.quickfacts-grid { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
	.quickfact + .quickfact,
	.quickfacts-grid .quickfact { border-left: none; border-top: 1px solid var(--line-soft); padding-top: 14px; }
	.quickfacts-grid .quickfact:first-child { border-top: 0; padding-top: 12px; }

	/* Reviews: 1 kolonne */
	.reviews-grid { grid-template-columns: 1fr; }

	/* Service process: lidt mindre polstring */
	.service-process { padding: 28px 24px; }
	.service-process__step { padding: 18px 20px; gap: 16px; }
	.service-process__num { width: 38px; height: 38px; font-size: 16px; }

	/* Mid-CTA: stacked på mobil */
	.service-midcta { grid-template-columns: 1fr; padding: 24px 22px; gap: 18px; text-align: center; }
	.service-midcta__btn { width: 100%; justify-content: center; }

	/* Inline quote: mindre polstring */
	.service-quote { padding: 28px 24px 28px 64px; }
	.service-quote__mark { top: 22px; left: 18px; width: 28px; height: 28px; }
	.service-quote__text { font-size: 17px; }

	/* Animals strip */
	.service-animals__inner { padding-bottom: 22px; }

	/* Om os: 1 kolonne */
	.values-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr 1fr; }
	.equipment-gallery { grid-template-columns: 1fr 1fr; }

	/* Kontakt: 1 kolonne, smartere mobil */
	.kontakt-quick-grid { grid-template-columns: 1fr; }
	.practical-grid { grid-template-columns: 1fr; }
	.contact-form { padding: 24px; }
	.form-row--two { grid-template-columns: 1fr; }
	.kontakt-map iframe { height: 360px; }
	.kontakt-akut-card { padding: 20px; }
	.kontakt-akut-card__title { font-size: 18px; }
	.section--kontakt-quick,
	.section--kontakt-form,
	.section--kontakt-map,
	.section--kontakt-practical,
	.section--kontakt-faq { padding: 64px 0; }
	.section--kontakt-akut { padding: 32px 0 0; }
	.section--omos-intro,
	.section--omos-values,
	.section--omos-team,
	.section--omos-equipment,
	.section--omos-mission { padding: 64px 0; }
	.mission-card { padding: 40px 28px; }

	/* Footer 1 kolonne */
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.site-footer { padding: 64px 0 110px; }
	.footer-brand { gap: 14px; }

	/* Service blokke: lidt mindre polstring */
	.service-block { padding: 28px 22px; }

	/* Local contact info: knapper stable */
	.local-contact-actions .btn { width: 100%; }

	/* FAQ items: mindre polstring */
	.faq-item__summary { padding: 18px 20px; gap: 16px; font-size: 15.5px; }
	.faq-item__answer { padding: 0 20px 20px; }
	.faq-help-card { padding: 22px; }
	.faq-help-card .btn { width: 100%; }

	/* Section headers */
	.section-header { margin-bottom: 40px; }
	.section-h2 { font-size: clamp(26px, 5vw, 32px); }

	/* Final CTA buttons: stable */
	.final-cta-buttons .btn { width: 100%; }

	/* Sticky mobil CTA aktiveres */
	.mobile-cta { display: block; }

	/* VetPlan visual: hide pris-tag på meget små viewports */
	.vetplan-visual__tag { top: 16px; right: 16px; padding: 14px 18px; }

	/* Header logo lidt mindre */
	.site-logo__img { width: 160px; }
	.site-logo__text { font-size: 18px; }

	/* Footer-knapper på smal skærm */
	.footer-cta-btn { padding: 12px 14px; }
	.footer-cta-btn__body strong { font-size: 14.5px; }

	/* Footer kontakt-bar på mobil */
	.footer-contact-bar__cards { grid-template-columns: 1fr; gap: 10px; }

	/* VetPlan: 1 kolonne */
	.vetplan-features-grid { grid-template-columns: 1fr; }
	.vetplan-price-card { padding: 36px 28px; }
	.vetplan-price-card__cta .btn { width: 100%; }
	.section--vetplan-intro,
	.section--vetplan-features,
	.section--vetplan-steps,
	.section--vetplan-price,
	.section--vetplan-audience,
	.section--vetplan-faq { padding: 64px 0; }

	/* Henvisninger: 1 kolonne */
	.henvisninger-caps-grid { grid-template-columns: 1fr; }
	.section--henvisninger-intro,
	.section--henvisninger-caps,
	.section--henvisninger-process,
	.section--henvisninger-form,
	.section--henvisninger-faq { padding: 64px 0; }
	.referral-form .form-fieldset { padding: 18px 18px 4px; }
	.referral-form .form-legend { font-size: 14px; }

	.page-hero__cta .btn { width: 100%; }
}

/* ---------------------------------------------------------
   Lille mobil (max 480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {

	.hero-h1 { font-size: 28px; }

	.services-grid { grid-template-columns: 1fr; }

	.contact-card { padding: 16px 18px; gap: 12px; }
	.contact-card__icon { width: 44px; height: 44px; }

	.specialty-card__body { padding: 24px 22px; }

	.intro-visual { aspect-ratio: 4 / 3; }

	/* Hide CTA secondary on tiny screens (still accessible via menu) */
	.hero-cta .btn-outline-light { display: none; }
}

/* ---------------------------------------------------------
   Print styles
   --------------------------------------------------------- */
@media print {
	.topbar,
	.site-header,
	.mobile-cta,
	.mobile-drawer,
	.mobile-drawer-overlay,
	.section--final-cta,
	.hero-video,
	.hero-overlay { display: none !important; }

	body { color: #000; background: #fff; }
	.section { padding: 24px 0; break-inside: avoid; }
	a { color: #000; text-decoration: underline; }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.specialty-card:hover { transform: none; }
	.specialty-card:hover .specialty-card__img { transform: none; }
}