/* Page shell: layout for the header, tabs, call bar and the per-section
   bands. Shared by every page (index/repair, boats, restoration, contact).
   The design system itself (colors, type, buttons) is styles.css. */

html, body { margin: 0; }
body { background: #dfdfe1; }
.mono { font-family: "Barlow Condensed", system-ui, sans-serif; }

/* Mobile-first shell: fills the screen edge-to-edge on phones, foldables
   and small tablets. It only becomes the centered "phone frame in a
   blueprint field" on genuinely large (desktop) screens — see the
   min-width query below. A fixed-width column here made the page look
   tiny (a narrow strip with empty gray bars) on larger phones. */
.bg {
  min-height: 100vh; display: flex; justify-content: center;
  background: #dfdfe1;
}
.shell {
  width: 100%; max-width: 100%; background: var(--color-bg);
  min-height: 100vh; position: relative; box-shadow: var(--shadow-lg);
  padding-bottom: 78px;
}
header.site {
  padding: 16px 18px 12px; border-bottom: 1px solid var(--color-divider);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.tabs { display: flex; border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; z-index: 10; background: var(--color-bg); }
.callbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; z-index: 30; padding: 10px 14px;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--color-divider);
  display: flex; gap: 9px;
}

/* Boats: one per row on phones, and automatically balancing to fill the
   row once there's room (larger phones, foldables, tablets) — no layout
   switch needed. auto-fit (not auto-fill) collapses empty tracks so a
   small inventory stays centered/balanced instead of crammed to the left
   with dead space on the right. */
.boat-grid {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Reading views (a single boat, the repair page, the sign) keep a
   comfortable column width instead of stretching across a desktop. */
.view-narrow { max-width: 620px; margin-inline: auto; width: 100%; }
/* Drop the blueprint "+" registration marks — cleaner, less rustic. */
.blueprint > .corner { display: none; }

/* Repair page: photo/text split bands. Stack on phones, sit side by
   side on desktop. Each photo backs one claim — hero (we come to you),
   gelcoat (proof of craft), outboard band (proof of specialty). */
.hero-split { display: grid; grid-template-columns: 1fr; }
/* The hero is a portrait video still (scan tool in the foreground, engine
   behind). On phones it fills the width at 3:4, anchored to the bottom so
   the tool and its screen are always in frame. */
.hero-split .hero-media { aspect-ratio: 3 / 4; min-height: 185px; }
.split2 { display: grid; grid-template-columns: 1fr; }
.svc-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) {
  .hero-split { grid-template-columns: 1.1fr 1fr; }
  /* Desktop: the still fills its whole column edge to edge, cropped to the
     bottom of the frame so the scan tool and its readings fill the photo. */
  .hero-split .hero-media { aspect-ratio: auto; min-height: 400px; }
  .hero-split > div:first-child { display: flex; flex-direction: column; justify-content: center; }
  .split2 { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Desktop: center the page in the blueprint field, wider grid =====
   Kept high (860px) so phones, unfolded foldables and small tablets get
   the full-bleed mobile landing page rather than a shrunk desktop grid. */
@media (min-width: 860px) {
  .bg { background: var(--color-neutral-200); }
  .shell {
    max-width: 1080px; box-shadow: var(--shadow-md);
    padding-bottom: 32px;
  }
  .callbar { display: none; }   /* the header Call/Text button covers desktop */
  .boat-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* Restoration: pics and the "What we do" list stack on phones, and sit
   side by side (pics left, list right) once there's room. */
.resto-work { display: grid; gap: 24px; max-width: 980px; margin-inline: auto; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .resto-work { grid-template-columns: 1.25fr 1fr; align-items: start; }
}

/* Print: only the sign card prints, full page, no chrome */
@media print {
  body, .bg { background: #fff; }
  .shell { box-shadow: none; width: 100%; padding: 0; }
  header.site, .tabs, .callbar, .no-print { display: none !important; }
  #app { padding: 0; }
  .sign-card { border: 2px solid #000 !important; }
}