/* SixPoint Financial Partners - shared responsive layer.
   Loaded after /assets/css/styles.css on every page.

   This file owns cross-page responsive behavior: the container/section
   utilities, hero height policy, the mobile header and drawer, and the
   component-level mobile rules for the six-point board, the planning
   technology carousel, the bio modals and the podcast hero. Page markup
   carries fluid clamp() values inline; anything that needs a breakpoint or
   needs to override a fixed inline desktop value lives here.

   Breakpoints in use (introduced only where content requires them):
     <=420px  small mobile
     <=600px  standard / large mobile
     <=860px  mobile through portrait tablet
     <=900px  tablet
     <=1140px below the desktop navigation breakpoint
*/

/* ---------- 1. Global safety ---------- */

html { -webkit-text-size-adjust: 100%; }

img, svg, video, iframe, canvas { max-width: 100%; }
img { height: auto; }

/* Long strings must never create page-level horizontal overflow. */
a[href^="mailto:"], a[href^="tel:"], a[href^="http"], [data-wrap-anywhere] {
  overflow-wrap: anywhere;
  word-break: normal;
}
p, li, dd, blockquote, figcaption { overflow-wrap: break-word; }

/* Form controls stay inside the viewport and never trigger iOS auto-zoom. */
input, select, textarea, button {
  max-width: 100%;
  font-size: max(16px, 1em);
}
textarea { min-height: 8rem; }
@media (max-width: 480px) {
  button[type="submit"] { width: 100%; }
}

/* ---------- 2. Shared layout utilities ---------- */

.sp-container {
  width: min(100% - 2rem, 1240px);
  margin-inline: auto;
}
@media (min-width: 480px) {
  .sp-container { width: min(100% - 3rem, 1240px); }
}

.sp-section {
  padding-block: clamp(4rem, 8vw, 8rem);
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}

.sp-grid-cards {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.sp-grid-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
@media (max-width: 640px) {
  .sp-grid-cards, .sp-grid-2 { grid-template-columns: 1fr; }
}

.sp-cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) {
  .sp-cta-group { flex-direction: column; align-items: stretch; }
  .sp-cta-group > a, .sp-cta-group > button { width: 100%; }
}

/* ---------- 3. Heroes ----------
   Mobile hero height is content-driven; the approved viewport-relative
   heights return at tablet and above, and stand down again on short
   landscape screens so nothing is trapped off-screen. */

[data-hero] { min-height: auto; }
@media (min-width: 768px) {
  [data-hero] { min-height: 56vh; }
  [data-hero="home"] { min-height: 82vh; }
}
/* Asymmetric image | copy splits: one column until there is room for two. */
.sp-split { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .sp-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* Mobile hero padding: keep the CTA close to the fold. */
@media (max-width: 600px) {
  [data-hero] > div {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  [data-hero], [data-hero="home"] { min-height: auto; }
  [data-hero] > div { padding-top: 48px !important; padding-bottom: 40px !important; }
}

/* ---------- 4. Header and mobile drawer ---------- */

@media (max-width: 1140px) {
  [data-nav] { display: none !important; }
  .sp-menu-btn { display: flex !important; }
}
@media (min-width: 1141px) {
  .sp-drawer { display: none !important; }
}

/* Below 600px the header is a deliberate single row: logo + menu. Client
   Login and Let's Connect both live inside the drawer. */
@media (max-width: 600px) {
  .sp-util-login { display: none !important; }
}
@media (max-width: 560px) {
  .sp-util-cta { display: none !important; }
}

.sp-drawer a[href] {
  min-height: 44px;
  display: flex !important;
  align-items: center;
}
.sp-menu-btn { touch-action: manipulation; }

/* Scroll lock while the drawer is open (set by site.js). */
html[data-menu-open], html[data-menu-open] body { overflow: hidden; }

/* ---------- 5. Six-point board ---------- */

[data-board] { max-width: 560px; margin-inline: auto; }
[data-board-hit] { touch-action: manipulation; }
[data-board-hit]:focus-visible { outline: 2px solid #0274BB; outline-offset: 2px; }

/* ---------- 6. Planning technology carousel ----------
   The two flanking phone frames are decorative duplicates of the active
   screen. Below 860px (phones and portrait tablets) only the focused frame is shown, at a width that fits
   a 320px viewport, so nothing is clipped and the controls stay reachable. */

@media (max-width: 860px) {
  [data-app-carousel] [data-app-frame]:not(:nth-of-type(2)) { display: none !important; }
  [data-app-carousel] [data-app-frame]:nth-of-type(2) {
    width: min(268px, 72vw) !important;
    height: auto !important;
    aspect-ratio: 268 / 552;
    border-width: 6px !important;
    border-radius: 34px !important;
  }
}

/* ---------- 7. Bio modals ---------- */

[data-bio-modal] {
  max-height: 100dvh;
  padding-bottom: calc(clamp(24px, 5.3vw, 48px) + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 560px) {
  /* clear the close button, which sits over the top-right of the dialog */
  [data-bio-dialog] { padding-top: 84px !important; }
}
[data-bio-dialog] img { flex: 0 0 auto; }
/* The bio body carries its own 52vh scroll box for desktop. On phones and
   short landscape screens that becomes a small box scrolling inside a
   scrolling overlay; let the overlay be the only scroller instead. */
@media (max-width: 640px), (max-height: 600px) {
  [data-bio-dialog] [style*="max-height:52vh"] {
    max-height: none !important;
    overflow: visible !important;
  }
}
/* The name column's 240px minimum is wider than the dialog's content box
   on a 320px phone. */
@media (max-width: 400px) {
  [data-bio-dialog] [style*="min-width:240px"] { min-width: 0 !important; }
}
[data-bio-close] { min-width: 44px; min-height: 44px; }

/* ---------- 8. Podcast hero ----------
   Desktop runs photo | copy with the phone straddling the seam. Below 900px
   the two columns stack and the phone sits centered in the photo panel
   instead of overflowing its right edge. */

@media (max-width: 900px) {
  [data-screen-label="Podcast hero"] > div { grid-template-columns: 1fr !important; }
  [data-screen-label="Podcast hero"] > div > div:first-child {
    min-height: 0 !important;
    display: flex;
    justify-content: center;
    padding: clamp(32px, 8vw, 64px) 16px;
  }
  [data-screen-label="Podcast hero"] > div > div:first-child > div:last-child {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(264px, 62vw) !important;
  }
  /* the desktop left inset exists to clear the phone; it is not needed stacked */
  .sp-podcast-copy { padding-left: clamp(20px, 5vw, 40px) !important; }
}

/* ---------- 9. Footer ----------
   The footer is the one place on the site where links are stacked lists of
   plain text. At desktop that reads correctly; on a phone each row is only
   23-24px tall, well under a comfortable touch target for this audience. The
   rows below get real tap height without changing the desktop composition. */

@media (max-width: 899px) {
  footer a[href] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* the contact rows are icon + text and already flex; keep the icon aligned */
  footer a[href] svg { flex: 0 0 auto; }
  /* social buttons */
  footer a[aria-label] { width: 44px; height: 44px; }
  /* the legal row wraps: give each item breathing room rather than a dense block */
  footer [style*="gap:12px 28px"] { row-gap: 0; column-gap: 24px; }
}

/* ---------- 10. Standalone links that are really controls ----------
   Phone numbers, email addresses and "Listen" buttons sit on their own in
   bars and cards. On a phone they are the primary action of that block, so
   they get a real tap height rather than the 24px a text baseline gives. */

@media (max-width: 899px) {
  [data-screen-label="Contact bar"] a[href],
  [data-screen-label="Start the conversation"] a[href^="tel:"],
  [data-screen-label="Start the conversation"] a[href^="mailto:"],
  [data-screen-label="Book the review"] a[href^="tel:"],
  [data-screen-label="Book the review"] a[href^="mailto:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  [data-screen-label="Latest episodes"] a[href*="youtube"] { min-height: 44px; }
  /* standalone text links marked in source: card CTAs, "Explore" links,
     contact lines that sit alone on their row */
  a[data-tap] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Pointer-aware instruction for the six-point board: the desktop copy asks
   for a hover, which is not available on a touch screen. */
.sp-hint-tap { display: none; }
@media (hover: none) {
  .sp-hint-hover { display: none; }
  .sp-hint-tap { display: inline; }
}

/* Team portraits rest in grayscale and take their color on hover or focus.
   A touch screen has no hover, so without this they would never show in
   color at all. */
@media (hover: none) {
  [data-team-grid] img { filter: none !important; }
}

/* ---------- 11b. Ohio office page header ----------
   The Ohio page carries its own sticky header. Below 900px its nav wrapped
   into extra rows (327px tall at 320, over half the screen). The navy strip
   now scrolls away, the section nav is one swipeable row, and the CTA
   (repeated in the hero directly below) steps aside on phones. */
@media (max-width: 900px) {
  [data-ohio-header]:not([data-ohio-sticky]) { position: relative !important; top: auto !important; }
  [data-ohio-header][data-ohio-sticky] { top: calc(-1 * var(--ohio-strip, 0px)) !important; }
  [data-ohio-strip] a { min-height: 44px !important; }
  [data-ohio-bar] { padding-block: 8px !important; gap: 4px 16px !important; }
  [data-ohio-nav] {
    order: 3;
    flex: 1 1 100% !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-ohio-nav]::-webkit-scrollbar { display: none; }
  [data-ohio-nav] a { flex: 0 0 auto; white-space: nowrap; }
  [data-ohio-header] ~ main [id] { scroll-margin-top: var(--ohio-bar, 0px); }
}
@media (max-width: 680px) {
  [data-ohio-cta] { display: none !important; }
}
@media (max-width: 379px) {
  /* logo and phone no longer share a row: the phone joins the nav row */
  [data-ohio-nav] { flex: 1 1 180px !important; }
  [data-ohio-actions] { order: 4; }
}
@media (max-height: 500px) and (orientation: landscape) {
  [data-ohio-header][data-ohio-header] { position: relative !important; top: auto !important; }
}

/* ---------- 11. Long-form and disclosure pages ---------- */

@media (max-width: 600px) {
  /* the 404 page carries desktop section padding around three lines of text */
  .sp-shortpage { padding-block: 64px !important; }
}

/* ---------- 12. Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}