/* Vintage Coachworks — enhancements (mobile Meet Marty, footer polish)
   Loaded on both / and /contact. Selectors are kept high-specificity so they
   win over Framer's inline component styles regardless of source order.
   Brand tokens: red rgb(226,0,26) · ink rgb(20,20,20) · Switzer headings, Inter body. */

/* ---------------------------------------------------------------------------
   1) MEET MARTY — mobile switcher
   Framer's own "features-expanded" section breaks on phone (stacks all photos,
   ~19500px tall). Below Framer's phone breakpoint (<810px) we hide it and show
   our own compact, tap-to-swap version instead.
--------------------------------------------------------------------------- */
#vcw-marty-mobile { display: none; }

@media (max-width: 809.98px) {
  section[data-framer-name="features-expanded"] { display: none !important; }
  #vcw-marty-mobile { display: block; }
}

#vcw-marty-mobile {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
}
#vcw-marty-mobile * { box-sizing: border-box; }

.vcw-mm-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 52px 20px;
}

.vcw-mm-heading {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: rgb(20, 20, 20);
  margin: 0 0 20px 0;
}

/* Photo stage — portrait crop, matches the desktop framing. Photos are stacked
   and cross-faded; the active one sits on top. */
.vcw-mm-stage { margin: 0 0 18px 0; }
.vcw-mm-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: #ececec;
}
.vcw-mm-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.vcw-mm-photo img.is-active { opacity: 1; }

.vcw-mm-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 2px 0 2px;
}
.vcw-mm-cap-num {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgb(226, 0, 26);
}
.vcw-mm-cap-title {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.03em;
  color: rgb(20, 20, 20);
}

/* Buttons — number + label, active = red accent */
.vcw-mm-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 28px 0;
}
.vcw-mm-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 11px;
  background: #ffffff;
  color: rgb(20, 20, 20);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.08s ease;
}
.vcw-mm-btn:active { transform: scale(0.99); }
.vcw-mm-btn .vcw-mm-num {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(20, 20, 20, 0.4);
  min-width: 22px;
  transition: color 0.2s ease;
}
.vcw-mm-btn .vcw-mm-label {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.03em;
}
.vcw-mm-btn.is-active {
  border-color: rgb(226, 0, 26);
  background: rgba(226, 0, 26, 0.05);
}
.vcw-mm-btn.is-active .vcw-mm-num { color: rgb(226, 0, 26); }

/* Content — subtitle + body, matching the desktop text layout (dark ink,
   generous size). Subtitle sits a step above the body. */
.vcw-mm-content { margin-top: 2px; }
.vcw-mm-ct-heading {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgb(20, 20, 20);
  margin: 0 0 20px 0;
}
.vcw-mm-ct-body p {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  line-height: 1.72;
  color: rgb(20, 20, 20);
  margin: 0 0 18px 0;
}
.vcw-mm-ct-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   2) SMALL-PHONE FIXES — Framer's phone layouts are drawn at a 390px-wide
   artboard with fixed pixel heights. On narrower/shorter phones (iPhone SE/
   mini, 360px Androids) text wraps to more lines and was clipped mid-line at
   the section edge, looking like it ran under the next section.
--------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Home: intro statement "Van verroest staal ... originele details." — the
     text-wrapper is height:417px + overflow:hidden, sized for 390px wide. Let
     it grow with the text; the section keeps ~140px of slack below it, so the
     red band still covers the extra lines. */
  .framer-TzLX1 .framer-8tqjoe {
    height: auto !important;
    min-height: 417px !important;
  }

  /* Contact: the hero is height:60.25vh while its photo + white intro text are
     ~484px of fixed content — on short viewports the photo and the last text
     line were cut off at the section edge. Never let it shrink below the
     content; on taller phones 60.25vh wins and nothing changes. */
  .framer-rU22O .framer-nzv4vt {
    min-height: 484px !important;
  }

  /* Home: hero heading stack (VINTAGE COACHWORKS / tagline / Contact button)
     is height:309px fixed — on narrow/short phones the tagline wraps taller
     and the Contact button was pushed out and sliced off. Grow with content,
     never shrink below the designed 309px. */
  .framer-TzLX1 .framer-1kuh031 {
    height: auto !important;
    min-height: 309px !important;
  }
}

/* ---------------------------------------------------------------------------
   3) FOOTER — layout polish + larger title (same texts)
   The footer is a Framer code component; we override its inline styles here.
--------------------------------------------------------------------------- */
.vcw-footer {
  border-top: 3px solid rgb(226, 0, 26);
}

/* Bigger, more prominent title */
.vcw-footer .vcw-footer-heading {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 8px 0;
}
/* Small red kicker line under the title for polish */
.vcw-footer .vcw-footer-heading::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 16px;
  background: rgb(226, 0, 26);
  border-radius: 2px;
}

/* Column titles — refined, red icon accent */
.vcw-footer .vcw-footer-col-title {
  font-family: 'Switzer', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 14px 0;
}
.vcw-footer .vcw-footer-col-title svg { color: rgb(226, 0, 26); }

/* Items — a touch larger, clearer */
.vcw-footer .vcw-footer-col-item {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 0 0 6px 0;
}
.vcw-footer a.vcw-footer-col-item:hover { color: #ffffff; }

.vcw-footer .vcw-footer-hr { border-top-color: rgba(255, 255, 255, 0.12); }
.vcw-footer .vcw-footer-copy {
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
}

/* Desktop: generous rhythm, heading spanning above the grid */
@media (min-width: 1025px) {
  .vcw-footer .vcw-footer-inner { padding: 84px 60px 40px 60px; }
  .vcw-footer .vcw-footer-heading { font-size: 40px; margin-bottom: 12px; }
  .vcw-footer .vcw-footer-grid { gap: 40px; margin-top: 44px; }
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
  .vcw-footer .vcw-footer-heading { font-size: 34px; }
  .vcw-footer .vcw-footer-grid { margin-top: 36px; gap: 40px 48px; }
}

/* Phone: centered, calm stack */
@media (max-width: 767px) {
  .vcw-footer .vcw-footer-heading {
    font-size: 27px;
    text-align: center;
    margin-bottom: 4px;
  }
  .vcw-footer .vcw-footer-heading::after { margin-left: auto; margin-right: auto; }
  .vcw-footer .vcw-footer-grid { margin-top: 26px; }
  .vcw-footer .vcw-footer-col-title { justify-content: center; margin-bottom: 10px; }
  .vcw-footer .vcw-footer-col-item { font-size: 15px; }
}