/* Crackstone Chiropractic — site-level layout classes + responsive rules.
   DS tokens come from ../styles.css; this file only handles page layout. */

.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }
.section--alt { background: var(--bg-alt); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--spruce-900); color: var(--ivory-50);
  padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-sans); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--ivory-50); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--start { align-items: start; }
.split--hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.split--wide-right { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

/* Header visibility: desktop DS header vs mobile header */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Reveal animation — gated on reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--hero, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Footer stacks on small screens (DS Footer uses 4-col grid via inline style; override) */
@media (max-width: 767px) {
  footer > div:first-child { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  footer > div:first-child { grid-template-columns: 1fr !important; }
}

/* Mobile sticky action bar (Book + Call) */
.mobile-action-bar { display: none; }
@media (max-width: 1023px) {
  .mobile-action-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: flex; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 249, 244, 0.96);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-subtle);
  }
}

/* Screen-reader-only labels (keep heading order correct without visual change) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ProcessSteps stacks on small phones. The DS component renders an inline
   3-column grid with no breakpoint, which overflowed below ~430px. */
/* !important is required: the DS component sets grid-template-columns inline. */
.process-steps > ol { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 639px) {
  .process-steps > ol { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Touch targets: pad dense link rows to >=44px. Padding only, so line boxes
   and type are unchanged. */
/* !important on the footer links: the DS sets a `padding` shorthand inline. */
footer nav a { padding-block: 11px !important; }
a[href^="tel:"] { padding-block: 11px; }
.grid-3 a[href^="service.html"], .grid-4 a[href^="service.html"] { padding-block: 8px; }
nav[aria-label="Breadcrumb"] a { display: inline-block; padding-block: 5px; }