/* ============================================================
   Stella Rescue — mobile responsiveness.
   Loaded after the design tokens/styles. The design pages use
   inline styles (fixed multi-column grids + large display type)
   that don't adapt to small screens, so these rules override
   them by class. !important is required to beat inline styles.
   overflow-x: clip (not hidden) avoids breaking the sticky nav.
   ============================================================ */

html, body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; }

/* Two-column content + form-outer layouts stack first */
@media (max-width: 900px) {
  .dc-cols2 { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Center the secondary CTA once the columns stack (looks better on mobile) */
  .dc-cta-center { justify-content: center !important; }
}

/* Four-up feature grids and the footer: 2-up on tablets, 1-up on phones */
@media (max-width: 860px) {
  .dc-cols4 { grid-template-columns: 1fr 1fr !important; }
  .dc-foot  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .dc-cols4 { grid-template-columns: 1fr !important; }
  .dc-foot  { grid-template-columns: 1fr !important; }
  .dc-form2 { grid-template-columns: 1fr !important; }
  .dc-foot-links { grid-template-columns: 1fr !important; }
}

/* Scale oversized display type so long words never overflow and the page
   reads comfortably on a phone. Covers headings plus the standalone script /
   quote accents that aren't h1/h2 (footer wordmark, "Our promise", the pull
   quote), which would otherwise stay desktop-sized while everything else shrank. */
@media (max-width: 600px) {
  h1 { font-size: 34px !important; }
  h1 span { font-size: 40px !important; }
  h2 { font-size: 27px !important; }
  h2 span { font-size: 32px !important; }
  blockquote { font-size: 22px !important; line-height: 1.5 !important; }
  .dc-display-accent { font-size: 26px !important; }
}

/* Ease the generous card padding on phones: 40px all-round leaves too little
   room for content once the viewport is ~375px wide. Give the text back its
   width without touching the desktop look. */
@media (max-width: 560px) {
  .dc-form-card { padding: 24px !important; }
  .dc-cta-card  { padding: 44px 22px !important; }
}

/* Dark CTA cards use a ghost "secondary" button linking to Contact. The DS
   Button component overwrites its inline style, so the intended light text
   never applies and the button renders ink-700 text on the ink-700 card —
   invisible, which left the primary button looking off-center. Restore the
   light-on-dark ghost styling here (loads last, so !important is needed). */
.cta-actions a[href="/contact"] {
  color: var(--cream-100) !important;
  border-color: var(--ink-400) !important;
}

/* Mobile nav: collapse the inline links into a hamburger + dropdown panel.
   Desktop (>=768px) keeps the horizontal links (set via the template's inline
   styles); below that the hamburger button and dropdown take over. Inline
   styles set the desktop defaults, so these overrides need !important. */
@media (max-width: 767px) {
  .dc-header { padding-left: 16px !important; padding-right: 16px !important; }
  .dc-nav-desktop { display: none !important; }
  .dc-nav-toggle { display: inline-flex !important; }
  .dc-logo img { height: 44px !important; }
}

/* Narrowest phones (~320px): drop the Adopt CTA from the bar so logo +
   hamburger have room. Standard phones (360/375px) keep it. Adopt remains
   reachable via its own /adopt page. */
@media (max-width: 339px) {
  .dc-nav-cta { display: none !important; }
}

/* Gallery carousel. The reel's geometry is three numbers — frame width, frame
   height, and the scale of the frames either side — and every seat in the ring is
   derived from them, so moving the reel at a breakpoint is just moving these.
   Inline styles set the defaults, hence !important.

   Below ~1080px the container is narrower than the 520px cap, so the centre is
   sized as a share of the viewport instead. 50vw is the widest that still leaves
   room for both neighbours to sit inside the stage rather than be sliced by its
   overflow. */
@media (max-width: 1080px) {
  .dc-carousel-stage { --fw: 50vw !important; }
}

/* Below ~1000px the container edges close in on the peeking neighbours and the
   side arrows start sitting on top of them. Drop the arrows rather than let
   them overlap: the neighbours are themselves labelled Previous/Next buttons,
   the arrow keys still steer, and touch can swipe. */
@media (max-width: 999px) {
  .dc-carousel-arrow { display: none !important; }
}

/* On a phone the neighbours are full size (--k: 1) and sit just past the edges,
   where the stage's overflow hides them. So at rest you see one photo, and a step
   slides the next one in from off-screen — the reel a phone expects, rather than
   shrunken neighbours too small to read. The frames still exist, which is what
   the photos travel on; nothing is hidden with display:none.

   With no visible neighbours to sit on top of, the side arrows come back. They
   are the only visible way to step the reel here, since swipe and arrow keys are
   both invisible affordances. This block follows the one above so it wins. */
@media (max-width: 560px) {
  .dc-carousel-stage { --fw: 84vw !important; --fh: 52vh !important; --k: 1 !important; }
  .dc-carousel-arrow { display: block !important; }
}