/* ==========================================================================
   StreetHello short pages (pages package): consultation, contact, the three
   service pages and What customers see. Loaded after styles.css through
   $pageStylesheets; the shared layouts of these pages are in styles.css §15.
   Bump the ?v= in the page controllers whenever this file changes.
   ========================================================================== */

/* Request form (ui/enquiry-form.ui.php, DESIGN-SPEC §6.4) ------------------ */
.enquiry-status:focus { outline: none; }
.enquiry-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-m); }
/* Around a confirmation (e.g. the no-JavaScript return to #enquiry-status) the ring keeps success semantics:
   green-700 instead of the terracotta that also marks errors. */
.enquiry-status:has(> .enquiry-received):focus-visible { outline-color: var(--green-700); }
.enquiry-status > .error-summary,
.enquiry-status > .alert { margin-bottom: var(--space-5); }
.error-summary h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.error-summary h3 .icon { width: 22px; height: 22px; stroke-width: 2; }
.alert--error .alert__body .enquiry-status-message { color: var(--text); }
.alert__actions .btn--small { min-height: 44px; }

/* Contact (owner decision O1): phone and email are always both shown, side by side once there is room; each keeps
   its own label, error and value. */
.enquiry-contacts { display: grid; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); }
@media (min-width: 640px) { .enquiry-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The preference question appears only when both are valid. It stays visibly subordinate to the contact fields:
   a small legend and two native radios in a row (44px targets), tucked under the pair. */
.enquiry-preference { display: grid; gap: 2px; margin-top: calc(var(--space-3) - var(--space-5)); }
.enquiry-preference__legend { font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--text-strong); }
.enquiry-preference.field--invalid .enquiry-preference__legend { color: var(--error-text); }
.enquiry-preference .field__error { margin-top: 4px; }
.enquiry-preference__options { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.enquiry-preference__choice { align-items: center; padding-block: 6px; font-size: var(--fs-small); color: var(--text-strong); }
.enquiry-preference__choice input { margin: 0; }
.enquiry-preference__choice input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The error summary links a group error (no contact, no preference) to its fieldset, so the legend, hint and
   error land in view just below the sticky header (html's scroll-padding-top), whatever their wrapping; inputs
   keep the height of their own label, hint and error above them (--field-lead, styles.css §7). */
.enquiry-contact, .enquiry-preference { scroll-margin-top: 0; }
.enquiry-preference:disabled .enquiry-preference__choice { color: var(--text-muted); cursor: not-allowed; }
.enquiry-form .textarea { min-height: 140px; }
.enquiry-submit [hidden] { display: none !important; }
/* Without JavaScript the counter cannot follow the typing, so it is not shown (maxlength still applies). */
.no-js .enquiry-form .char-count { display: none; }

/* Confirmation: shown only after a confirmed save, carrying the page's h1 */
.success__icon { width: 44px; height: 44px; color: var(--green-700); stroke-width: 1.5; }
.form-success p { max-width: 36em; }
.enquiry-received__email { overflow-wrap: anywhere; }

/* What customers see: real stills (DESIGN-SPEC §6.7) ------------------------ */
/* The plate keeps its 12px mat; each still is cropped just inside the portal card's own border. */
.cv-frame picture, .cv-frame img { display: block; width: 100%; height: auto; }
.cv-frame img { border-radius: var(--radius-s); background: var(--paper-100); }
/* Below 360px the mat and border give way to the still (clipped to the plate's corners), so the print still's
   smallest text ("Campaign report") stays at about 12px at 320px instead of 11.2px. */
@media (max-width: 359px) { .cv-frame { padding: 0; border: 0; overflow: hidden; } }
/* The Example tag runs inline with the caption text, so the sentence wraps beside it rather than under it. */
.cv-shot .caption .tag { display: inline-flex; vertical-align: baseline; margin-right: 8px; }
.ui-detail img { display: block; }