/* Auburn Cord Duesenberg Co. — site styles.
   Most layout lives inline in each page (carried over from the approved design).
   This file holds the shared basics and the phone/tablet adjustments. */

:root {
  --acd-red: #C6311F;
  --acd-red-deep: #9E2716;
  --acd-black: #010303;
  --acd-ivory: #F5F2EC;
  --acd-gray: #5C5852;
  --acd-rule: #DDD7CC;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--acd-black);
  font-family: Lora, Georgia, serif;
  font-size: 20px;
  line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: var(--acd-red); }
a:hover { color: var(--acd-red-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--acd-red);
  outline-offset: 3px;
}
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--acd-red) !important; }
button[type="submit"]:hover { background: var(--acd-red) !important; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--acd-black); color: #FFFFFF; padding: 12px 18px;
  font-family: Jost, sans-serif; letter-spacing: 2px;
}
.skip:focus { left: 12px; top: 12px; }

/* Spam trap on the contact form; hidden from people */
.hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }

/* The floating red call button, top right */
.call-pill {
  position: fixed; right: 32px; top: 26px; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  background: var(--acd-red); color: #FFFFFF; text-decoration: none;
  font-family: Jost, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 2px;
  padding: 16px 26px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(1, 3, 3, 0.3);
}
.call-pill:hover { background: var(--acd-red-deep); color: #FFFFFF; }

/* Header and opening section: company name above the menu, both lined up
   with the headline at the left edge of the screen (not centered on wide monitors). */
:root { --edge: clamp(40px, 5vw, 96px); }
.hdr {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 20px 44px !important;
  white-space: nowrap;
  padding-right: 300px !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: var(--edge) !important;
}
main section#top > div[style*="bottom: 0"] > div,
main section#top > div[style*="max-width: 1320px"] {
  max-width: none !important;
  margin: 0 !important;
  padding-left: var(--edge) !important;
  padding-right: var(--edge) !important;
}

/* Photo viewer: tap a gallery photo to see it full size */
.gal img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 60; background: #010303;
  display: flex; align-items: center; justify-content: center; padding: 72px 16px 40px;
}
.lightbox[hidden] { display: none; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(1, 3, 3, 0.6); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px;
  font-family: Jost, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 3px;
}
.lb-close { top: 14px; right: 14px; padding: 10px 14px 10px 18px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; justify-content: center; }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }

/* Phone-only menu button and menu screen (hidden on desktop) */
.m-menu-btn, .m-menu, .phone-bg, .phone-shade, br.m-br { display: none; }

/* Car gallery thumbnails */
.thumb { padding: 0; border: none; background: none; cursor: pointer; border-radius: 2px; }
.thumb img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 2px; }
.thumb[aria-current="true"] { outline: 2px solid var(--acd-red); outline-offset: 2px; }

/* ---------- Tablet ---------- */
.hdr nav { flex-wrap: nowrap !important; flex-shrink: 0; column-gap: 30px !important; }
@media (max-width: 1520px) {
  .hdr { column-gap: 32px !important; }
  .hdr nav { column-gap: 22px !important; letter-spacing: 2px !important; }
  .call-pill { font-size: 15px; padding: 13px 20px; gap: 9px; letter-spacing: 1.5px; }
}
@media (max-width: 1300px) {
  .hdr { flex-wrap: wrap !important; white-space: normal; }
  .hdr nav { flex-wrap: wrap !important; flex-shrink: 1; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  main section[aria-label="What we service"] > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
  .hdr { padding-right: 40px !important; padding-top: 96px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --edge: 20px; }
  body { font-size: 18px; }

  /* Call button becomes a full-width bar along the bottom of the screen */
  body { padding-bottom: 64px; }
  .call-pill {
    left: 0; right: 0; top: auto; bottom: 0; border-radius: 0; justify-content: center;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); font-size: 16px; gap: 10px;
    box-shadow: 0 -4px 16px rgba(1, 3, 3, 0.25);
  }
  .call-pill .call-num::before { content: "THE SHOP · "; }
  body.menu-open .call-pill { display: none; }

  /* Top bar: company name on the left, MENU button on the right */
  .hdr {
    padding: 22px 130px 20px 20px !important;
    min-height: 72px;
  }
  .hdr nav { display: none !important; }
  .hdr br.m-br { display: inline; }
  .hdr > a { font-size: 12px !important; letter-spacing: 3px !important; line-height: 1.6; white-space: normal; }

  .m-menu-btn {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 14px; right: 14px; z-index: 30;
    background: rgba(1, 3, 3, 0.72); color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px;
    font-family: Jost, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 3px;
    padding: 11px 16px 11px 20px; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }

  .m-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 40; overflow-y: auto;
    background: var(--acd-black); color: #FFFFFF;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom));
  }
  .m-menu[hidden] { display: none; }
  body.menu-open { overflow: hidden; }
  .m-menu-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 72px; border-bottom: 1px solid #2A2826;
  }
  .m-menu-brand { font-family: Jost, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 3px; line-height: 1.6; }
  .m-menu-close {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: none; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px;
    font-family: Jost, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 3px;
    padding: 10px 14px 10px 18px; cursor: pointer;
  }
  .m-menu-links { display: flex; flex-direction: column; padding: 12px 0; }
  .m-menu-links a {
    display: flex; align-items: baseline; gap: 18px;
    padding: 18px 0; border-bottom: 1px solid #2A2826;
    color: #FFFFFF; text-decoration: none;
    font-family: 'Bodoni Moda', Didot, Georgia, serif; font-weight: 600; font-size: 34px; line-height: 1.1;
  }
  .m-menu-links a[aria-current="page"] { color: #E0A89F; }
  .m-num { font-family: Jost, sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 3px; color: var(--acd-red); min-width: 28px; }
  .m-menu-foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 18px; }
  .m-menu-call {
    display: block; text-align: center; background: var(--acd-red); color: #FFFFFF; text-decoration: none;
    font-family: Jost, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 2px; padding: 20px;
  }
  .m-menu-call:hover { color: #FFFFFF; background: var(--acd-red-deep); }
  .m-menu-foot p { margin: 0; font-size: 16px; line-height: 1.6; color: #C9C3B8; text-align: center; }

  /* Homepage hero: same layout and shade as Service; photo fills the whole banner */
  main section#top.hero-home { padding-left: 0 !important; padding-right: 0 !important; }
  main section#top.hero-home > .hero-pic img {
    top: calc(-1 * var(--home-up, 130px)) !important; height: calc(100% + var(--home-up, 130px)) !important;
    object-position: var(--home-x, 40%) center !important;
  }

  /* For Sale and Our Story: photo behind the headline, like Service and Parts */
  main section#top.hero-photo {
    position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column;
  }
  main section#top.hero-photo > header { position: relative; z-index: 2; }
  main section#top.hero-photo > div[style*="max-width: 1320px"] {
    flex-grow: 1; justify-content: flex-end; align-content: flex-end;
    padding-top: 220px !important; padding-bottom: 48px !important;
  }
  main section#top.hero-photo > div > *:not(figure) { position: relative; z-index: 2; }
  main section#top.hero-photo .phone-bg {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; z-index: 0;
  }
  main section#top.hero-photo .phone-shade {
    display: block; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgba(1,3,3,0.6) 0%, rgba(1,3,3,0) 20%, rgba(1,3,3,0) 38%, rgba(1,3,3,0.8) 70%, rgba(1,3,3,0.95) 100%),
      linear-gradient(90deg, rgba(1,3,3,0.75) 0%, rgba(1,3,3,0.4) 40%, rgba(1,3,3,0) 65%);
  }
  main section#top.hero-story figure { position: absolute; inset: 0; z-index: 0; margin: 0; }
  main section#top.hero-story figure img[style] { width: 100% !important; height: 100% !important; border-radius: 0 !important; object-position: center 15% !important; }
  main section#top.hero-story figcaption { display: none; }
  main section#top.hero-story > div > div { padding-bottom: 0 !important; }

  /* Stronger shadow behind text that sits on photos */
  main section#top h1, main section#top p, main .story-split h2, main .story-split p {
    text-shadow: 0 2px 4px rgba(1,3,3,0.9), 0 4px 22px rgba(1,3,3,0.85) !important;
  }

  /* Homepage Our Story: heading and text overlap the Glenn Pray photo, like the page banners */
  main section#story { padding-left: 0 !important; padding-right: 0 !important; }
  main .story-split { display: grid !important; }
  main .story-split > img[style] { min-height: 0 !important; }
  main .craft-head { flex-direction: column; align-items: flex-start !important; }
  main .craft-head > p { min-width: 0 !important; flex-basis: auto !important; }
  main section[style*="40px 128px"], main section[style*="40px 120px"] { padding-bottom: 64px !important; }
  main section#story .story-split > img[style] { grid-area: 1 / 1; height: 640px !important; width: 100%; }
  main section#story .story-split > div {
    grid-area: 1 / 1; position: relative; z-index: 1;
    padding: 400px 20px 56px !important;
    background: linear-gradient(180deg, rgba(1,3,3,0) 0, rgba(1,3,3,0) 300px, rgba(1,3,3,0.7) 420px, #010303 520px);
  }


  /* Galleries of 3 or more photos: a 2 x 2 grid */
  main .gal { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  main section .gal > img[style] { height: 190px !important; border-radius: 3px; }
  main section .gal > img:nth-child(3):last-child { grid-column: 1 / -1; height: 230px !important; }
  main section[aria-label="Warehouse details"], main section[aria-label="In the shop"] { padding: 8px !important; }
  /* Parts warehouse photos: bolts/fittings photo goes full width at the bottom */
  main section[aria-label="Warehouse details"] .gal > img:nth-child(2) { order: 3; grid-column: 1 / -1; height: 230px !important; }
  main section[aria-label="Warehouse details"] .gal > img:nth-child(3) { order: 2; grid-column: auto; height: 190px !important; }
  /* Service list: I to III on the first row, IV to VI on the second */
  main section[aria-label="What we service"] > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 14px !important; }
  main section[aria-label="What we service"] > div > div { padding: 20px 0 24px !important; gap: 8px !important; }
  main section[aria-label="What we service"] h3 { font-size: 12px !important; letter-spacing: 1.5px !important; line-height: 1.35; hyphens: auto; }
  main section[aria-label="What we service"] p { font-size: 14px !important; line-height: 1.45 !important; }
  main section[aria-label="What we service"] span[style*="font-size: 40px"] { font-size: 30px !important; }
  /* Split sections (photo + text on black): photo runs the full width of the phone */
  main section[aria-label="What we stock"], main section[aria-label="Old-school know-how"] { padding-left: 0 !important; padding-right: 0 !important; }
  main section[aria-label="What we stock"] > div > img[style], main section[aria-label="Old-school know-how"] > div > img[style] { height: 360px !important; width: 100%; }

  /* Big phone numbers: stay on one line, as large as the screen allows */
  main a[href^="tel"][style*="Bodoni"] { font-size: 11vw !important; white-space: nowrap; }

  /* Footer: logo centered, social links in one row */
  main .site-footer > div:first-child { flex-direction: column; align-items: center !important; gap: 20px !important; padding-top: 48px !important; padding-bottom: 28px !important; }
  main .site-footer > div:first-child > div { flex-wrap: nowrap !important; gap: 22px !important; font-size: 13px !important; letter-spacing: 2px !important; }

  /* Side padding and section spacing */
  main section, main footer > div, main header > div:not(.hdr) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  main section[style*="padding: 128px"], main section[style*="padding: 120px"],
  main section[style*="padding: 112px"], main section[style*="padding: 104px"] {
    padding-top: 72px !important; padding-bottom: 72px !important;
  }
  main section[style*="128px;"], main section[style*="120px;"], main section[style*="112px;"] {
    padding-bottom: 72px !important;
  }
  main section > div[style*="padding: 0 40px"], main section div[style*="padding: 72px 40px"],
  main section div[style*="padding: 40px 40px 0"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  main div[style*="padding: 96px 80px"] { padding: 56px 20px !important; }
  main article[style*="padding: 48px"] { padding: 28px 20px !important; }
  main div[style*="padding: 32px;"] { padding: 22px 18px !important; }

  /* Headings */
  main h1 { font-size: 40px !important; line-height: 1.1 !important; }
  main h2 { font-size: 34px !important; line-height: 1.12 !important; }
  main h2[style*="letter-spacing: 2px"] { font-size: 28px !important; letter-spacing: 1px !important; }
  main h3[style*="Bodoni"] { font-size: 26px !important; }
  main p[style*="font-size: 21px"], main p[style*="font-size: 22px"] { font-size: 18px !important; }
  main a[style*="font-size: 72px"], main a[style*="font-size: 80px"] { font-size: 40px !important; }
  main span[style*="font-size: 64px"] { font-size: 44px !important; }

  /* Hero blocks with the photo behind the text */
  main section#top[style*="height: 9"], main section#top[style*="height: 8"] { height: auto !important; min-height: 100svh; }
  main section#top > div[style*="bottom: 0"] { position: relative !important; padding-top: 140px; }
  main section#top > div[style*="bottom: 0"] > div { padding-bottom: 48px !important; gap: 16px !important; }
  main section#top a[style*="padding: 20px 32px"], main section#top a[style*="padding: 19px 31px"] {
    padding: 16px 20px !important; font-size: 15px !important;
  }

  /* Tall photos get a sensible height on phones */
  main img[style*="height: 7"]:not([style*="position: absolute"]),
  main img[style*="height: 6"]:not([style*="position: absolute"]),
  main img[style*="height: 5"]:not([style*="position: absolute"]) {
    height: 320px !important;
  }
  main img[style*="height: 4"]:not([style*="position: absolute"]) { height: 280px !important; }
  main img[style*="height: 8"]:not([style*="position: absolute"]),
  main img[style*="height: 9"]:not([style*="position: absolute"]) { height: 420px !important; }
  main figure[style*="repeat(2"] img { height: 220px !important; }

  /* Flex children that asked for a large starting width */
  main [style*="flex: 1 1"], main [style*="flex: 2 1"], main [style*="flex: 3 1"], main [style*="flex: 0 1"] {
    flex-basis: 100% !important;
  }

  .thumb img { height: 64px; }
  main div[style*="repeat(5"] { gap: 8px !important; }
  main aside[style*="sticky"] { position: static !important; }
  main dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; }

  main footer img { width: 220px !important; }
  main footer > div:last-child { font-size: 12px !important; letter-spacing: 1px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}