/* A construction and interiors firm's website (src/examples/ex-website-portfolio.js), beside the Business
   Website engine's own stylesheet: a project on a sheet of its own, with its photographs in order, its
   figures in ruled cells and its scope beside its materials; the project an enquiry refers to; the list
   of projects on a phone; a pointer to another example; a plain list. Every colour, the radius and the
   display face are the business's own (--x-* on main#main).
   Phone first; widths in em, as the kit's are. */

/* ---- a project's name and what to do next ------------------------------------------------- */
.xw-portfolio-head { display: grid; align-items: end; gap: 14px clamp(20px, 4vw, 56px); }
.xw-portfolio-name, .xw-portfolio-intro { display: grid; align-content: start; gap: 10px; min-width: 0; }
.xw-portfolio-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.xw-portfolio-code, .xw-portfolio-fig, .xw-portfolio-data dt { color: var(--x-muted); font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xw-portfolio-badge { display: flex; }
.xw-portfolio-lede { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); }
@media (min-width: 53.75em) { .xw-portfolio-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---- its photographs: the first one large, the others in a row, each numbered --------------- */
.xw-portfolio-shots { display: grid; gap: 14px 12px; }
.xw-portfolio-shot { display: grid; grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr); align-items: center; gap: 8px 14px; min-width: 0; }
.xw-portfolio-shot--lead { grid-template-columns: minmax(0, 1fr); }
.xw-portfolio-shot-btn { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--x-radius, 8px); background: none; }
.xw-portfolio-shot-btn .x-img { display: block; width: 100%; }
.xw-portfolio-shot--lead .x-img { max-height: min(64vh, 38rem); object-fit: cover; }
.xw-portfolio-shot figcaption { display: grid; gap: 2px; color: var(--x-ink); font-size: .9375rem; }
@media (min-width: 37.5em) {
  .xw-portfolio-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xw-portfolio-shot { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .xw-portfolio-shot--lead { grid-column: 1 / -1; }
}

/* ---- its figures, ruled like the title block of a drawing ----------------------------------- */
.xw-portfolio-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-top: 2px solid var(--x-ink); }
.xw-portfolio-cell { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--x-hair); }
.xw-portfolio-data dd { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 37.5em) { .xw-portfolio-data { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60em) {
  .xw-portfolio-data { grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--x-hair); }
  .xw-portfolio-cell { padding: 14px; border-bottom: 0; border-inline-start: 1px solid var(--x-hair); }
  .xw-portfolio-cell:first-child { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---- scope beside materials ------------------------------------------------------------------ */
.xw-portfolio-parts { display: grid; align-items: start; gap: clamp(22px, 4vw, 56px); }
.xw-portfolio-parts > * { min-width: 0; }
@media (min-width: 53.75em) { .xw-portfolio-parts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.xw-portfolio-note { max-width: 46rem; padding-top: 14px; border-top: 1px solid var(--x-hair); }
.xw-portfolio-list { display: grid; gap: 4px; padding-inline-start: 1.1em; list-style: square; }
.xw-portfolio-list li::marker { color: var(--x-muted); }

/* ---- the project an enquiry refers to --------------------------------------------------------- */
.xw-portfolio-ref { display: grid; grid-template-columns: minmax(5.5rem, 28%) minmax(0, 1fr); align-items: start; gap: 14px 16px; padding: 14px; border: 1px solid var(--x-hair); border-inline-start: 3px solid var(--x-accent); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xw-portfolio-ref--none { grid-template-columns: minmax(0, 1fr); border-inline-start-color: var(--x-line); }
.xw-portfolio-ref-media { overflow: hidden; border-radius: var(--x-radius, 8px); }
.xw-portfolio-ref-media .x-img { display: block; width: 100%; }
.xw-portfolio-ref-text { display: grid; align-content: start; gap: 4px; min-width: 0; }
.xw-portfolio-ref-title { font: var(--x-display-weight, 600) 1.1875rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xw-portfolio-ref-title:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xw-portfolio-ref-actions { margin-top: 6px; }

/* ---- a pointer to another example of the same firm: drawn apart from the firm's own content ------ */
.xw-portfolio-aside { display: grid; gap: 8px; padding: 16px 18px; border: 1px dashed var(--x-line); border-radius: var(--x-radius, 8px); }

/* ---- the list of projects ------------------------------------------------------------------------
   Under a type's heading the first row of projects stands a little clear of the rule, and the columns
   are the same whatever a filter leaves: one project alone keeps its column and is not stretched across
   the page. On a phone the engine lays a card on its side, a small photograph beside the words; a
   builder's portfolio is read through its photographs, so here each project keeps its photograph at the
   full width of the column, with its name, its line of facts and its summary under it, as the project's
   own sheet opens. */
.xw-portfolio-index .xw-group .xw-list { padding-top: 14px; }
.xw-portfolio-index .xw-list--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
@media (max-width: 37.4375em) {
  .xw-portfolio-index .xw-list--cards { gap: 30px; }
  .xw-portfolio-index .xw-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border-bottom: 0; }
  .xw-portfolio-index .xw-card .x-card-media { width: 100%; }
  .xw-portfolio-index .xw-card .x-card-title { font-size: 1.3125rem; }
  .xw-portfolio-index .xw-group + .xw-group { margin-top: 10px; }
}