/* ============================================================
   Saugatuck Website v2 — logo + wordmark lockup
   Scoped overrides layered on top of the design system's
   styles.css. Pairs the geometric logo mark with the
   "Saugatuck" name set in Libre Caslon (institutional serif).
   Layout is unchanged from v1; this only restyles the brand.
   ============================================================ */

/* Lockup: mark + stacked text */
.brand-lockup { display: inline-flex; align-items: center; gap: 13px; line-height: 1; }
.brand-mark { width: 44px; height: 44px; display: block; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.005em;
  color: var(--navy);
  line-height: 0.95;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
  margin-top: 6px;
}

/* On the dark navy footer */
.ft .brand-name, .ft .brand-sub { color: var(--bone); }
.ft .brand-mark { border: 1px solid var(--rule-light); }
.ft-brand .brand-lockup { display: inline-flex; margin-bottom: 12px; }
/* Align the footer lockup with the column headings on the right */
.ft-brand { padding-top: 4px; }
.ft-brand .brand-lockup { margin-top: 2px; }
/* Fine print spans the entire bottom row */
.ft-bottom .legal { max-width: none; }

@media (max-width: 940px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: 23px; }
}

/* Products as clickable boxes (title + status only) */
.prod-boxes { grid-template-columns: repeat(3, 1fr); }
.prod-boxes .prod-box {
  position: relative; min-height: clamp(150px, 17vw, 200px);
  justify-content: space-between; color: var(--navy);
  background: var(--bone-2); border-color: rgba(12,39,67,0.22);
  padding-right: clamp(48px, 5vw, 64px);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.prod-boxes .prod-box:hover { background: color-mix(in srgb, var(--navy) 12%, var(--bone-2)); border-color: var(--navy); }
.prod-boxes .prod-box h3 { margin: 0 0 0; font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: 0.005em; }
/* Clean, readable status label (no bordered full-width pill) */
.prod-boxes .prod-box .pi-status {
  align-self: flex-start; border: none; padding: 0; background: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; color: var(--copper); opacity: 1;
}
.prod-boxes .prod-box .pi-status.live { color: #C79A3A; }
/* Outbound arrow pinned to the top-right corner, angled up toward it */
.prod-boxes .prod-box .prod-box-arr {
  position: absolute; top: clamp(20px,2.4vw,28px); right: clamp(20px,2.4vw,28px);
  bottom: auto; left: auto;
  font-family: var(--mono); font-size: 19px; line-height: 1; color: var(--copper);
  transform: rotate(-45deg); transform-origin: center;
  transition: transform var(--dur-fast);
}
.prod-boxes .prod-box:hover .prod-box-arr { transform: rotate(-45deg) translateX(4px); }
@media (max-width: 780px) { .prod-boxes { grid-template-columns: 1fr; } }

/* Base (mobile-first) hero headline: wraps at a smaller size so it never
   overflows. MUST precede the @media block below so the desktop rule
   (equal specificity) wins at >=941px. */
.hero h1 { font-size: clamp(28px, 7vw, 44px); white-space: normal; }

/* Align the full-bleed hero's text with the centered .wrap column on wide
   screens, so the hero lines up with the nav, sections, and footer (the
   image still bleeds to the right edge). */
@media (min-width: 941px) {
  .hero-grid { grid-template-columns: 1.45fr 1.1fr; align-items: stretch; gap: clamp(40px, 4vw, 56px); min-height: 0; }
  .hero h1 { font-size: clamp(42px, 4.4vw, 55px); white-space: nowrap; }
  .hero-text { padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); padding-right: clamp(24px, 3vw, 40px); min-width: 0; justify-content: center; }
  /* Image stretches to align its top and bottom with the text block */
  .hero-media { align-self: stretch; height: auto; min-height: 0; aspect-ratio: auto;
    margin: clamp(24px, 4vw, 56px) max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) clamp(24px, 4vw, 56px) 0; }
  .hero-media image-slot, .hero-media img { height: 100%; width: 100%; object-fit: cover; }
}

/* Keep the hero subtext at a stable width (consistent 4 lines) and the two
   buttons on a single row — desktop only, so mobile can wrap/shrink freely. */
@media (min-width: 941px) {
  .hero-sub { width: 452px; max-width: 100%; }
  .hero-actions { flex-wrap: nowrap; }
  .hero-actions .btn { white-space: nowrap; }
}
/* Mobile: never let hero content exceed the viewport */
@media (max-width: 940px) {
  .hero-sub { width: auto; max-width: 100%; }
  .hero h1 { overflow-wrap: anywhere; }
}
/* Keep the location tag above the (user-droppable) hero image */
.hero-tag { z-index: 3; }

/* Mobile: About teaser image should follow its copy (not lead), so it doesn't
   sit image-on-image under the hero. */
@media (max-width: 940px) {
  .practice-media { order: 1; }
}