/* ==========================================================================
   Express Acoustics theme: WordPress additions to the concept CSS (this site only).
   main.css, pages.css and acoustics.css are the concept's files, unchanged (copy them over again when the
   concept changes); the shared WordPress additions are in the parent's theme.css. Everything this site
   needs on top is here.
   ========================================================================== */

/* Logged-in editors: the full menu sits below the admin toolbar. */
body.admin-bar .menu { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .menu { top: 46px; }
}

/* Contact: the documents route ("Ask for this document" links) adds a fourth route card; the four sit two by
   two from 640px (the concept's three cards keep their row). */
.route__options--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .route__options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__options--4 .route__text { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; }
}

/* Documents sent on request (docs.json "check": not yet cleared for publishing): the row's end says so. */
.doc__state--request { background: var(--c-accent-soft); color: var(--c-accent-ink); white-space: nowrap; }
.doc--request .doc__link { text-decoration-style: dotted; }

/* The upload boxes' error line (file type, size, count) sits under the box like the other fields' errors. */
.dropzone + .field__error { margin-top: 6px; }

/* Legal pages (Express Facades T-028 F2-05): web addresses in the wording (browser help pages, the ICO) are
   links and break at any point on narrow screens instead of running past the column. */
.legal__body a { overflow-wrap: anywhere; }

/* Downloads (T-034 A1-10): on phones a document's date takes its own line, so the meta line never starts with a
   separator ("· Dated 14 May 2025" wrapped under "3 pages" at 390). */
@media (max-width: 479.98px) {
  .doc__meta .doc__dated { flex-basis: 100%; }
  .doc__meta .doc__dated::before { display: none; }
}

/* Project facts in the live view (T-034 A1-08). The TBC switch removes the photo placeholder of a project
   without photos and the rows of facts still to confirm; the panel then fits what is left:
   - a group with no facts left goes, with its divider;
   - a lead group left with one fact (the delivered-by row went) joins the next group: one divider, not two,
     and the panel no longer stretches to the photo's height;
   - with no photo the panel spans the row: the two groups sit side by side under one divider. */
.facts-panel__grid:not(:has(dd)) { display: none; }
.facts-panel__grid--lead:has(> div:only-child):has(+ .facts-panel__grid) { padding-bottom: 0; border-bottom: 0; }
.facts-panel__grid--lead:has(> div:only-child) + .facts-panel__grid { padding-top: 0; border-top: 0; }
.facts-panel:has(> .facts-panel__grid--lead > div:only-child) { align-self: start; }
@media (min-width: 768px) {
  .project-overview:not(:has(> .project-overview__media)) > .facts-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }
  .project-overview:not(:has(> .project-overview__media)) > .facts-panel > :not(.facts-panel__grid) { grid-column: 1 / -1; }
  .project-overview:not(:has(> .project-overview__media)) .facts-panel__grid--lead { padding-bottom: 0; border-bottom: 0; }
  .project-overview:not(:has(> .project-overview__media)) .facts-panel__grid--lead + .facts-panel__grid { padding-top: 18px; border-top: 1px solid var(--c-line); }
}
@media (min-width: 1024px) {
  .project-overview:not(:has(> .project-overview__media)) { grid-template-columns: minmax(0, 1fr); }
}

/* Project cards without a photo in the live view (T-034 A2-05). The TBC switch removes the "Photography to follow"
   frame (data-tbc on the card's media), so the card is text only:
   - a card on its own row (one project on a space page, or the last odd card) has no photo column: the text takes
     the full width, its facts sit in one row, and the summary keeps a readable line length;
   - in a row beside a card with a photo it keeps its own height instead of stretching to the photo card's (the
     empty lower half), and sits at the top of the row.
   The staging view, where the frame shows, is unchanged. The :is() lifts the rules above acoustics.css's
   ".project-grid--3 > .project-card:last-child:nth-child(odd)" (section 18), which sets the photo column. */
.project-card:not(:has(> .project-card__media)) { align-self: start; }
@media (min-width: 768px) {
  .project-grid > .project-card:not(:has(> .project-card__media)):is(:only-child, :last-child:nth-child(odd), :nth-child(n)) { grid-template-columns: minmax(0, 1fr); }
  .project-grid > .project-card:not(:has(> .project-card__media)):is(:only-child, :last-child:nth-child(odd)) .facts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  /* T-057: in that one row no fact spans it (acoustics.css spans an odd last fact in the two-column list). */
  .project-grid > .project-card:not(:has(> .project-card__media)):is(:only-child, :last-child:nth-child(odd)) .facts > .facts__item { grid-column: auto; }
  .project-grid > .project-card:not(:has(> .project-card__media)) .project-card__text { max-width: 68ch; }
}