/* Page CSS: only what sits inside a visual or a list and the kit lacks. Tokens and classes come from the kit. */

/* a row's grey second line (the kit's in-page demos write this the same way) */
.rows .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); margin-top: var(--s-1); }

/* the project facts: a plain list, a 1px rule closing each line */
.points { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; }
.points > li { padding-block: var(--s-3); border-bottom: 1px solid var(--line); max-width: 56ch; }
.points > li:first-child { padding-top: 0; }

/* the stack line and the project's links */
.project__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); font-size: var(--t-small); }
.project__links { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--t-body); }

/* MDHS: the peek list. The screenshots are cropped from their top; a row answers the pointer like a link
   does, since hovering, focusing or tapping it swaps the picture */
#mdhs .mdhs__frame { --ratio: 64%; }
#mdhs .mdhs__frame > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
#mdhs [data-peek-to] { cursor: pointer; }
@media (min-width: 1024px) {
  #mdhs .mdhs__group { display: contents; }
  #mdhs .mdhs__title { grid-column: 1 / -1; grid-row: 1; }
  #mdhs .mdhs__lead { grid-column: 1 / span 8; grid-row: 2; max-width: 62ch; font-size: var(--t-lead); margin-top: calc(var(--s-4) - var(--gutter, 24px)); }
  #mdhs .mdhs__rows { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--s-6); }
  #mdhs .mdhs__meta { grid-column: 1 / span 6; grid-row: 4; align-self: start; margin-top: var(--s-6); }
  #mdhs .mdhs__frame { grid-column: 7 / -1; grid-row: 3 / span 2; align-self: start; margin-top: var(--s-6); }
}
/* tablet and phone: two screens, two groups (the kit's .g2 rows, written here so the desktop stays one screen) */
@media (max-width: 1023px) {
  #mdhs { --h: 2; --hm: 2; }
  #mdhs > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: calc(var(--padt) + var(--padb) + var(--bar)); }
  #mdhs .mdhs__group { display: grid; gap: var(--s-6); align-content: start; min-height: 0; }
  #mdhs .mdhs__lead { font-size: var(--t-lead); }
  #mdhs .mdhs__frame { --ratio: 100%; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #mdhs .mdhs__rows > li { padding-block: var(--s-6); }
  #mdhs .mdhs__group { gap: var(--s-7); }
}
/* the taller tablet (820x1180): more room between the rows, so the first screen is not left half empty */
@media (min-width: 800px) and (max-width: 1023px) {
  #mdhs .mdhs__rows > li { padding-block: var(--s-7); }
  #mdhs .mdhs__group { gap: var(--s-8); }
}
@media (max-width: 639px) {
  #mdhs .mdhs__frame { --ratio: 166%; }
  #mdhs .mdhs__group { gap: var(--s-5); }
  #mdhs .mdhs__lead { font-size: var(--t-body); }
}

/* Skwahdle: two phone screens side by side, cropped above the keyboard */
#skwahdle .phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter, 24px); align-content: start; }
#skwahdle .phone { --ratio: 138%; }

/* client work: three engagements, the stack mosaic lined up at the foot of each */
.engagement { display: flex; flex-direction: column; }
.engagement > h3 { font-family: var(--font-text); font-size: var(--t-card); font-weight: 500; line-height: 1.3; }
.engagement__dates { margin-top: var(--s-1); }
.engagement > p { margin-top: var(--s-3); margin-bottom: var(--s-6); max-width: 46ch; }
.engagement > .mosaic { margin-top: auto; }
.clients__more { margin-top: var(--s-7); }
@media (max-width: 639px) { .clients__more { margin-top: 0; } }
@media (min-width: 640px) and (max-width: 1023px) { .clients__more { display: none; } }
.ic-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
/* the two groups are a phone's two screens; wider, their cards sit in one row of three */
@media (min-width: 640px) { .clients__group { display: contents; } }
@media (min-width: 640px) and (max-width: 1023px) { .clients__grid .section-head, .clients__grid .engagement { grid-column: 1 / -1; } }
@media (max-width: 639px) { .clients__group { display: grid; gap: var(--s-7); align-content: start; } }

/* a narrower column (1024 to 1279): a mosaic cell sets its logo beside its name, so names never clip */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mosaic > .ic-cell { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); }
  .engagement .ic-grid--mosaic { grid-template-columns: minmax(0, 1fr); }
  #about .ic-grid--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the tablet, held upright (640 to 1023): stacked sections planned to their screens (layout-v4.md section 2) */
@media (min-width: 640px) and (max-width: 1023px) {
  #m2l .frame--split { --ratio: 50%; }
  #skwahdle .phone { --ratio: 100%; }
  /* an engagement: its words left, its stack right, one row each */
  .engagement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); align-content: start; }
  .engagement > :not(.mosaic) { grid-column: 1; }
  .engagement > .mosaic { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: start; }
  .engagement > p { margin-bottom: 0; }
  .engagement .ic-grid--mosaic { grid-template-columns: minmax(0, 1fr); }
  .engagement .mosaic > .ic-cell { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); }
  .closing__links .footer__col { grid-column: span 4; }
  .closing__cta.close--type > .btn--xl.btn--primary { width: 100%; }
}

/* a phone */
@media (max-width: 639px) {
  #skwahdle .phones { grid-template-columns: minmax(0, 1fr); }
  #skwahdle .phone { --ratio: 100%; }
  /* the tools: compact cells, logo over name, two across, so the twelve fill the second screen */
  #about .mosaic > .ic-cell { padding: var(--s-3); gap: var(--s-2); }
  /* an engagement's stack: logos only, one row, each cell a square tile (the names are in the label) */
  .engagement .ic-grid--mosaic.ic-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engagement .mosaic > .ic-cell { justify-content: center; padding: var(--s-6) var(--s-5); }
  .engagement .mosaic > .ic-cell > div { display: none; }
  .engagement .ic-tile { --tile: 56px; }
}

/* the hero collage takes the split hero's place below 1024: the words, then the collage in what the screen leaves */
@media (max-width: 1023px) {
  .hero__collage { min-height: 240px; margin-block: var(--s-6) 0; }
}

/* a phone: the collage's front phone stands on the page margin */
@media (max-width: 639px) {
  .hero__collage .hero__phone { left: 0 !important; }
}