/* The site's kit: one block per component, each named by the role it plays
   on a page (never by the page it first appeared on). Every component has a
   pattern in chunks/kit/<name>.html, which a page copies and fills; it is
   never included. Values come from tokens.css; the frame (.wrap, sections)
   from layout.css; buttons, eyebrows and ledes from style.css.

   One kit for all five layouts of the style system (ADR 0085): a layout is
   which of these its homepage uses and how its welcome is composed
   (.hero--big, --cards, --story, --split, --simple), never a stylesheet of
   its own, so every Mood and Type reads the same in each.

   A page builds from these first. A new component is added only when none
   of these fits, as its own pattern and its own block, and every later page
   reuses it. A page's own stylesheet never restyles a component here.

   Mobile first, one breakpoint at 48rem. (skills/site-kit/SKILL.md) */

/* ---- hero: the opening band, drawn from the mood until a photo arrives ---- */

.hero {
  padding-block: var(--space-6);
  background: linear-gradient(var(--hero-band), var(--hero-band)), var(--hero-wash);
  text-align: var(--hero-align);
  color: var(--color-accent-ink);
}

.hero h1 {
  max-width: 16ch;
}

.hero .lede {
  max-width: 36rem;
}

.hero h1,
.hero .lede {
  color: inherit;
}

/* Each line of the welcome lines up with the others, from the start or in the middle. */
.hero .wrap > *,
.hero-split > div > * {
  margin-inline: var(--hero-inline);
}

.hero .actions {
  justify-content: var(--hero-justify);
}

/* Big picture: a tall, full-width welcome with the name as big as it goes. */
.hero--big {
  display: grid;
  align-content: end;
  min-height: 30rem;
  padding-block: var(--space-7) var(--space-6);
  border-block-end: 0.5rem solid var(--color-accent);
}

.hero--big h1 {
  max-width: 18ch;
}

/* Cards: a short welcome, so the grid is on the first screen. */
.hero--cards h1 {
  max-width: 18ch;
}

/* Story: one column, read from the top like the first page of an article. */
.hero--story .wrap,
.story-column {
  max-width: calc(38rem + 2 * var(--space-5));
}

.hero--story .eyebrow {
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.hero--story h1 {
  max-width: none;
}

/* Split: the words beside a photo-shaped panel in the design's colors, until the owner's photo takes its place. */
.hero-split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.hero-split > * {
  min-width: 0;
}

.hero-figure {
  aspect-ratio: 16 / 10;
}

.hero-figure::before {
  background: radial-gradient(ellipse 34% 46% at 50% 100%, var(--color-accent-soft) 0 99%, transparent 100%), radial-gradient(ellipse 37% 50% at 50% 100%, var(--color-accent) 0 99%, transparent 100%), linear-gradient(165deg, var(--color-surface) 0%, var(--color-accent-soft) 100%);
}


/* Simple: everything in the middle, and one thing to do. */
.hero--simple {
  display: grid;
  align-content: center;
  min-height: 26rem;
  text-align: center;
}

.hero--simple .wrap > * {
  margin-inline: auto;
}

.hero--simple .actions {
  justify-content: center;
}

/* On a narrow phone, the hero's buttons share the full width. */
@media (max-width: 30rem) {
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- photo frames: every photo, and every place one goes, in the design's frame ----
   A place for a photo is drawn in its ::before, inside the frame's padding,
   so the frame (a mount, a polaroid edge, a hard shadow) reads the same with
   or without the photo. */

.hero-figure,
.card-row-picture,
.text-media-panel {
  position: relative;
  overflow: hidden;
}

.hero-figure::before,
.card-row-picture::before,
.text-media-panel::before {
  content: '';
  position: absolute;
  inset: var(--frame-padding);
  border-radius: var(--radius);
}

.hero-figure,
.card-row-picture,
.text-media-panel,
.hero-photo-media,
.card-row-item img,
.text-media-media img,
.gallery-list img {
  border: var(--frame-border);
  padding: var(--frame-padding);
  box-shadow: var(--frame-shadow);
  background-color: var(--frame-bg);
  border-radius: var(--radius);
}

/* A full-width photo behind the welcome is never framed. */
.hero-photo-media {
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* ---- stripe: a strip of short phrases on the accent ---- */

.stripe {
  padding-block: var(--space-3);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.stripe-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  margin-block: 0;
  padding-block: 0;
}

.stripe-list li {
  max-width: none;
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: var(--heading-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-synthesis: none;
}

/* ---- service-list: what the business does as numbered rows, inside a reading column ---- */

.service-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: row;
}

.service-list-items li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-3);
  max-width: none;
  padding-block: var(--space-4);
  counter-increment: row;
  border-block-start: 1px solid var(--color-border);
}

.service-list-items li:last-child {
  border-block-end: 1px solid var(--color-border);
}

.service-list-items li::before {
  content: counter(row, decimal-leading-zero);
  grid-row: span 2;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: var(--heading-weight);
  line-height: 1;
  font-synthesis: none;
}

.service-list-items h3 {
  margin-block-end: var(--space-2);
}

.service-list-items p {
  color: var(--color-muted);
}

.service-list--centred .section-head {
  text-align: center;
}

.service-list--centred .section-head h2::before {
  margin-inline: auto;
}

.service-list--centred .service-list-items {
  max-width: 40rem;
  margin-inline: auto;
}

/* ---- statement: a big line of what the business stands for, over two columns of words ---- */

.statement-line {
  max-width: 24ch;
  margin-block-end: var(--space-5);
  font-size: var(--step-4);
  text-wrap: balance;
}

.statement-columns {
  display: grid;
  gap: var(--space-3);
}

.statement-columns p {
  color: var(--color-muted);
}

/* ---- contact-block: where to find the business, its numbers, and its hours ---- */

.contact-block-hours {
  padding: var(--space-4);
  align-self: start;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.contact-block-hours dl {
  margin: 0;
}

.contact-block-hours dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.contact-block-hours dl > div + div {
  border-block-start: 1px solid var(--color-border);
}

.contact-block-hours dt {
  font-weight: 700;
}

.contact-block-hours dd {
  margin: 0;
  text-align: end;
  color: var(--color-muted);
}

/* ---- hero-photo: the opening band over a photo, which is an <img> fetched first ---- */

.hero-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 26rem;
  padding: 0;
  color: var(--color-on-shade);
  position: relative;
}

.hero-photo > * {
  grid-area: 1 / 1;
}

.hero-photo-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo-shade {
  background: var(--color-shade);
}

.hero-photo-body {
  align-self: end;
  width: 100%;
  padding-block: var(--space-6);
}

.hero-photo h1 {
  color: inherit;
  max-width: 16ch;
}

.hero-photo .lede {
  color: inherit;
}

/* ---- card-row: a heading and a row of cards (services, products, people) ---- */

.card-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.card-row-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.card-row-item img,
.card-row-picture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Where a card's photo goes, until there is one: a quiet panel in the design's colors. */
.card-row-picture {
  margin-block-end: var(--space-2);
}

.card-row-picture::before {
  background: radial-gradient(ellipse 50% 28% at 22% 100%, var(--color-accent) 0 99%, transparent 100%), radial-gradient(ellipse 65% 40% at 82% 100%, var(--color-accent-soft) 0 99%, transparent 100%), linear-gradient(180deg, var(--color-surface), var(--color-page));
}

.card-row-marker {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: var(--heading-weight);
  line-height: 1;
  font-synthesis: none;
}

.card-row-item h3 {
  margin: 0;
}

.card-row-item p {
  margin: 0;
  color: var(--color-muted);
}

/* ---- feature-grid: short points side by side, each with a small mark ---- */

.feature-grid-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.feature-grid-list li {
  min-width: 0;
}

.feature-grid-mark {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-grid-mark svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- text-media: words beside a picture; --flip puts the picture first ---- */

.text-media-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.text-media-grid > * {
  min-width: 0;
}

.text-media-media {
  margin: 0;
}

.text-media-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Where the picture goes, until there is one: a panel in the design's colors. */
.text-media-panel {
  aspect-ratio: 4 / 3;
}

.text-media-panel::before {
  background: repeating-linear-gradient(135deg, transparent 0 1rem, var(--color-accent-soft) 1rem 1.15rem), var(--color-surface);
}

/* ---- gallery: pictures in an even grid, each with an optional caption ---- */

.gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.gallery-list figure {
  margin: 0;
}

.gallery-list img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.gallery-list figcaption {
  color: var(--color-muted);
  font-size: var(--step--1);
  margin-top: var(--space-1);
}

/* ---- cta-band: one closing ask on the accent color ---- */

.cta-band {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.cta-band h2,
.cta-band p {
  color: inherit;
}

.cta-band .button {
  background: var(--color-accent-ink);
  color: var(--color-accent);
  border-color: var(--color-accent-ink);
}

.cta-band .button--quiet {
  background: transparent;
  color: var(--color-accent-ink);
}

/* ---- testimonials: what customers said, with who said it ---- */

.testimonials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.testimonials-list figure {
  margin: 0;
  padding: var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: var(--radius);
}

.testimonials-list blockquote {
  margin: 0 0 var(--space-3);
  font-size: var(--step-1);
}

.testimonials-list figcaption {
  color: var(--color-muted);
  font-size: var(--step--1);
}

/* ---- map-embed: another service's map, framed to the page's width ---- */

.map-embed-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.map-embed-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- faq: questions that open to their answers ---- */

.faq-list details {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.faq-list details > div {
  padding-top: var(--space-2);
}

/* ---- steps: a numbered sequence (how it works) ---- */

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}

.steps-list li {
  counter-increment: step;
  min-width: 0;
}

.steps-list li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
}

/* ---- prose: a page of plain reading (about, policies, a story) ---- */

.prose-body > * {
  max-width: var(--measure);
}

.prose-body h2 {
  margin-top: var(--space-5);
}

.prose-body > h2:first-child {
  margin-top: 0;
}

.prose-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* The story's opening paragraph is set larger, the way a feature starts. */
.prose-body .lede {
  color: var(--color-ink);
}

.prose--centred .prose-body {
  text-align: center;
}

.prose--centred .prose-body > * {
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--space-7);
  }

  .hero--big {
    min-height: 40rem;
    padding-block: var(--space-7);
  }

  .hero--simple {
    min-height: 34rem;
  }

  .hero-split {
    grid-template-columns: var(--hero-columns);
    gap: var(--space-7);
  }

  .hero-figure {
    aspect-ratio: 4 / 5;
  }

  .stripe {
    padding-block: var(--space-4);
  }

  .stripe-list {
    justify-content: space-between;
  }

  .service-list-items li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding-block: var(--space-5);
  }

  .statement-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .contact-block-hours {
    padding: var(--space-5);
  }

  .hero-photo {
    min-height: 34rem;
  }

  .card-row-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feature-grid-list {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .text-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .text-media--flip .text-media-media {
    order: -1;
  }

  .gallery-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .testimonials-list {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .steps-list {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* contact-form: the site's contact form (skills/contact-form), and the block that holds it on the homepage. */
.contact-form-block {
  margin-block-start: var(--space-6);
}

.contact-form {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
}

.contact-form-field {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.contact-form label {
  font-weight: 600;
}

.contact-form-optional {
  color: var(--color-muted);
  font-weight: 400;
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  color: var(--color-ink);
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.contact-form-send {
  margin: 0;
}

/* A <button> takes the browser's small font unless the site's .button sets one: the page's, at no specificity, so .button still wins. */
:where(.contact-form) button {
  font: inherit;
}

/* The trap: off the screen for people and screen readers, there for bots. */
.contact-form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* After sending, the page comes back at #form-sent or #form-error. */
.contact-form-note {
  display: none;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.contact-form-note:target {
  display: block;
}

.contact-form-note--error {
  border: 1px solid var(--color-accent);
}

/* ---- hover: a card pointed at, or with the keyboard inside it, takes the
   look's hover shadow (its glow; the resting shadow unless the look sets
   one), and so does a button. No movement for a visitor who asks for less. ---- */

.contact-block-hours,
.card-row-item {
  transition: box-shadow 160ms ease;
}

.contact-block-hours:hover,
.contact-block-hours:focus-within,
.card-row-item:hover,
.card-row-item:focus-within {
  box-shadow: var(--card-hover-shadow);
}

.button:hover,
.button:focus-visible {
  box-shadow: var(--button-hover-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .contact-block-hours, .card-row-item {
    transition: none;
  }
}