/* site-fixes.css: fixes found by scripts/mobile-qa.mjs after the Claude Design export.
   Loaded after css/site.css by scripts/export-transform.mjs. Values come from tokens only.
   If the design is re-exported with these fixed, delete the matching rule here. */

/* Contact: the labels were 12px; body text minimum is 16px. */
.facts dt { font-size: 1rem; }

/* Contact: the email and Instagram links were 29px tall; tap targets need 44px. */
.facts dd a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); }

/* Spanish: "cinematográficas" is one long word and ran 9px past a 360px screen.
   Spanish pages take a slightly smaller display size; same floor and ceiling as --fs-hero. */
html[lang="es"] { --fs-hero: clamp(2.5rem, 1.5rem + 6vmin, 6rem); }
html[lang="es"] .h-hero, html[lang="es"] .h-page, html[lang="es"] .h-close { hyphens: auto; }

/* Home (builder's review, 2026-10-30): the frame numbers 01-05 read as leftovers on the
   home page. They stay on Work, where the page really is a contact sheet. */
.pg-home .fno-auto { display: none; }

/* Home hero: aim the crop at the helmet and visor (left of centre, a little high). */
.pg-home .hero-frame img { object-fit: cover; object-position: 35% 42%; }
/* Phones: the hero was more than a full screen tall. Cap it so the headline, buttons and
   the photo share the first screens. */
@media (max-width: 899px) {
  .pg-home .hero-frame img { height: 75svh; max-height: 75vh; }
}

/* Home hero on wide screens: the photo sat flush against the header deck. Give it the
   same breathing room as the sections below (builder's review, 2026-10-30). */
@media (min-width: 900px) {
  .pg-home .hero { padding-top: var(--s-6); }
}

/* Pass 2 (2026-11-01). Contact and Pricing small labels were 12px; body text minimum is 16px.
   Same fix as .facts dt above, applied to the rebuilt pages. */
.req, .price-table thead th, .direct-table th { font-size: 1rem; }

/* Contact honeypot: the hidden "company" field's label still measured as a 21px tap target
   off screen. Collapse both children to zero size; bots still find the input in the markup. */
.hp > * { position: absolute; width: 0; height: 0; padding: 0; border: 0; overflow: hidden; }

/* Contact: a field label is tappable (it focuses its field). With 16px "required"/"optional"
   tags the labels measured 26px tall; give them the full tap height, text kept on the field side. */
.field label { display: flex; align-items: flex-end; flex-wrap: wrap; min-height: var(--tap, 44px); }

/* Review pass (2026-11-02). Pricing header on phones: the old Book page opened with a
   full-screen intro, and that rule stayed, leaving a tall empty plum block above
   "Services & Pricing". Size it like every other page header. */
@media (max-width: 899px) { .book-head { min-height: 0; } }

/* Pricing: "Every shoot includes" and "How booking works" each brought full section
   padding, a double gap (288px on desktop). The design already tightens the top of
   "includes"; tighten the next section the same way so every gap on the page matches. */
.includes-tight + .book-how { padding-top: 0; }

/* Contact form reply line (assets/contact-form.js writes the copy doc's thank-you or
   failure line here). Body size, room above it, and a dimmed Send while it is sending. */
#form-status:not(:empty) { margin-top: var(--s-4); font-size: 1rem; }
.contact-form button[disabled] { opacity: .6; cursor: progress; }

/* Header (builder's pick, 2026-11-02): original bar height and logo size, with header 5's controls:
   plain links, Instagram and EN/ES, Contact as the one filled button.
   Controls mocked up as design/hero-lab/header_lab.py version 5. */
.deck .raise, .deck .raise:hover, .deck .raise[aria-current], .deck .lang a[aria-current] { background: transparent; border-color: transparent; box-shadow: none; }
.deck .nav-link, .deck .lang a { font-weight: 400; }
.deck .ig-btn, .deck .menu-btn { width: 44px; height: 44px; }
.deck .lang { padding: 0; gap: 0; }
.deck .lang a:not([aria-current]) { color: var(--muted); }
.deck .lang a + a { border-left: 1px solid var(--plum-hi); border-radius: 0; }
.deck .nav .nav-link[href$="/contact"] { order: 9; margin-left: var(--s-3); background: var(--accent); color: var(--on-accent); border-radius: var(--r-btn); padding-inline: var(--s-4); }
.deck .nav .nav-link[href$="/contact"][aria-current="page"] { text-decoration: none; }

/* Colour: purple 2 "Aubergine" (Gabriel's pick, 2026-11-03), from design/hero-lab/colour_lab.py.
   Overrides css/tokens.css until Claude Design's tokens are updated to match. */
:root { --canvas: #120d15; --ink: #f1ecf4; --grid-line: #1b161d; --border-deco: #2e2931; --surface-subtle: #18141b; --surface-lifted: #221d25;
  --muted: #aaa6ad; --plum: #3b084d; --plum-hi: #512164; --accent: #c487e8; --focus: #dba4fd; --on-accent: #120d15; }

/* DEPOSIT REQUIRED (Gabriel: "Make sure ppl see DEPOSIT REQUIRED"): one all-caps flag over the Home tiles
   and under the Services title, instead of a price line under each photo. */
.deposit-flag { grid-column: 1 / -1; justify-self: start; margin: 0; padding-left: var(--s-3); border-left: 3px solid var(--accent);
  color: var(--accent); font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
/* a label, not a button (site review 2026-11-03): no box, no pointer, a bar on the left instead */
.plum .deposit-flag { border-left-color: var(--ink); color: var(--ink); }
.book-head .deposit-flag { margin-block: var(--s-2); }
@media (min-width: 900px) {
  .pg-home .shoot-head { grid-column: 1 / span 8; align-self: end; }
  .pg-home .shoot-head + .deposit-flag { grid-column: 9 / -1; justify-self: end; align-self: end; }
}

/* Site review fixes (2026-11-03) */
/* "Hi, I'm Gabriel" on Home shows his photo, cropped square like the frame it replaced */
.pg-home .about-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; display: block; }
/* Privacy text */
.privacy-copy { grid-column: 1 / -1; max-width: var(--measure); display: flex; flex-direction: column; gap: var(--s-4); }
.privacy-head { padding-bottom: var(--s-7); }
/* the phone number never breaks across two lines */
a[href^="tel:"] { white-space: nowrap; }

/* Home top, full screen (hero test option C, builder's default 2026-11-03 until Gabriel picks).
   The photo fills the first screen; a fade in the page colour keeps the headline readable. */
.pg-home .hero.hero-full { position: relative; display: grid; align-items: end; min-height: calc(100svh - var(--deck-h)); overflow: hidden;
  padding: var(--s-9) var(--margin) calc(var(--s-8) + var(--grip-h)); }
.pg-home .hero-full .hero-bg { position: absolute; inset: 0; margin: 0; z-index: 0; grid-column: auto; grid-row: auto; } /* out of the grid, or it stays boxed in its old column */
.pg-home .hero-full .hero-bg img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 40% 20%; }
.pg-home .hero-full .hero-shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--canvas) 8%, color-mix(in srgb, var(--canvas) 60%, transparent) 45%, transparent 75%); }
.pg-home .hero-full .hero-copy { position: relative; z-index: 2; grid-column: auto; grid-row: auto; max-width: 36rem; padding-bottom: 0; }
@media (min-width: 900px) {
  .pg-home .hero.hero-full { padding: var(--s-9) var(--s-8); }
  .pg-home .hero-full .hero-bg img { height: 100%; object-position: 50% 50%; }
  .pg-home .hero-full .hero-shade { background: linear-gradient(to right, var(--canvas) 0%, color-mix(in srgb, var(--canvas) 70%, transparent) 38%, transparent 70%),
                                                linear-gradient(to top, var(--canvas) 0%, transparent 35%); }
}

/* Privacy Policy: the heading sat 144px above the text (builder, 2026-11-03) */
.privacy-head { padding-bottom: var(--s-5); }
.privacy-body.section { padding-top: 0; }
.privacy-copy .h3 { margin-top: var(--s-4); }

/* Services: Gabriel's two video clips between the list and "Every shoot includes" (2026-11-03) */
.videos .h2 { grid-column: 1 / -1; }
.video-row { grid-column: 1 / -1; display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .video-row { grid-template-columns: 1fr 1fr; } }
.video-frame { margin: 0; background: var(--surface-subtle); border: 1px solid var(--border-deco); padding: var(--s-2); }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.videos.section { padding-top: 0; row-gap: var(--s-5); } /* the list above already ends with section padding */
.videos + .includes-tight { padding-top: var(--s-9); }

/* Design review fixes (2026-11-03) */
/* every control uses the site fonts (buttons and fields otherwise fall back to the browser's Arial) */
button, input, select, textarea { font-family: inherit; }
/* #1 the old booking-tool placeholder box around Book a shoot / Call / Text */
.slot { border: 0; padding: 0; min-height: 0; }
/* #2 Services list: no leftover price-table header; each description sits under its service name */
.price-table thead { display: none; }
.price-table tr, .price-table th, .price-table td { display: block; }
.price-table .svc, .price-table .amt { width: auto; }
.price-table .svc { padding: var(--s-4) 0 var(--s-1); }
.price-table .amt { padding: 0 0 var(--s-4); }
/* #6 DEPOSIT REQUIRED: plain label, no side bar, right under the heading on Home and Services */
.deposit-flag, .plum .deposit-flag { border-left: 0; padding-left: 0; }
.pg-home .shoot-head + .deposit-flag { margin-top: calc(var(--s-7) * -1 + var(--s-3)); }
@media (min-width: 900px) {
  .pg-home .shoot-head { grid-column: 1 / -1; }
  .pg-home .shoot-head + .deposit-flag { grid-column: 1 / -1; justify-self: start; }
}
/* #7 stacked padding between dark sections */
.pg-home .shoot + .includes { padding-top: var(--s-7); }
.videos + .includes-tight { padding-top: var(--s-7); }
/* #8 phones: the closing band keeps Book a shoot only; Call and Text are in the bar at the bottom */
@media (max-width: 899px) { .closing .btn-row .btn-line { display: none; } }
/* #9 phones: aim the hero crop at the driver's helmet */
@media (max-width: 899px) { .pg-home .hero-full .hero-bg img { object-position: 25% 30%; } }
/* #11 Work: the closing band is one button, so less height */
.work-close { padding-block: var(--s-6); }
/* #13 "Hi, I'm Gabriel." photo: full width on phones, wider on desktop */
.pg-home .about-frame { grid-column: 1 / -1; }
@media (min-width: 900px) { .pg-home .about-frame { grid-column: 1 / span 5; } }

/* Contact: the Square "Book a date" button under the lead (2026-11-03) */
.page-head .btn-row { grid-column: 1 / -1; }

/* Phones and tablets only: a slightly taller header and bigger logo (builder, 2026-11-04). Desktop unchanged. */
@media (max-width: 899px) {
  :root { --deck-h: 92px; }
  .deck .logo, .menu-top .logo { height: 68px; }
}

/* Request a quote / Book a date: the slot stacks the buttons and the one-line help (2026-11-04) */
.slot { display: block; }
.book-help { margin-top: var(--s-4); color: var(--muted); max-width: var(--measure); }
.page-head .book-help { grid-column: 1 / -1; margin-top: 0; }