/* ==========================================================================
   STUDIO ALIASES

   studio.css is sealwyn.css taken whole and unmodified, by instruction. This
   file exists so it can stay that way.

   build.py writes a handful of class names directly into its markup rather
   than going through the shell -- `btn`, `eform`, `writeup` and so on. It is
   a DERIVED file, copied from the family reference into every site, so it
   cannot be edited per family. Those names all mean something sealwyn
   already has a component for, so each one is mapped to sealwyn's own rather
   than a new design being invented for it:

       btn, btn-primary  ->  cta
       eyebrow           ->  kicker
       writeup           ->  prose
       mapnote           ->  fine
       split-top         ->  split
       eform, eform-row  ->  the contact form, styled to match reach-card

   Nothing here introduces a new look. If a rule below does not match
   something sealwyn already does, it is a bug in this file.
   -------------------------------------------------------------------------- */

/* build.py's button names. Identical to .cta, which is what they mean. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--cta);
  color: #fff;
  font: 700 1rem var(--sans);
  text-decoration: none;
  border: 2px solid var(--cta);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.btn:hover {
  background: var(--cta-d);
  border-color: var(--cta-d);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(154, 52, 18, .55);
}

.btn-primary {
  background: var(--cta);
  border-color: var(--cta);
}

/* build.py's name for the small caps label above a heading: sealwyn's
   .kicker, to the letter. */
.eyebrow {
  display: inline-block;
  font: 800 .75rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cta);
  margin: 0 0 12px;
}

/* build.py's name for a block of running text -- the legal pages and the
   long-form sections. sealwyn calls it .prose. */
.writeup {
  max-width: 68ch;
}

.writeup h2 { margin-top: 1.6em; }
.writeup h3 { margin-top: 1.4em; }
.writeup p, .writeup li { color: var(--text); }
.writeup ul { padding-left: 1.1em; display: grid; gap: 8px; margin: 0 0 1.2em; }

/* The contact page's own three. `btn-lg` and `btn-block` are a size and a
   width on the same button; `split-body` is the column beside the form.
   None of them is a new component -- they are .cta and a grid child, which
   is why they are aliased here rather than designed. */
.btn-lg { min-height: 58px; padding: 16px 30px; font-size: 1.06rem; }
.btn-block { display: flex; width: 100%; }
.split-body { min-width: 0; }

/* A note under the map. sealwyn's .fine. */
.mapnote {
  font-size: .9rem;
  color: var(--muted);
  margin-top: 18px;
}

.mapframe {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
  display: block;
}

/* The contact page's split aligns to the top rather than centring, because
   a form and a column of detail are rarely the same height. */
.split-top {
  align-items: start;
}

/* The enquiry form, styled to match sealwyn's .reach-card: white, hairline
   border, the same radius and lift as every other card in the design. */
.eform {
  display: grid;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--lift);
}

.eform-row {
  display: grid;
  gap: 14px;
}

.eform label {
  display: grid;
  gap: 6px;
  font: 700 .88rem/1.3 var(--sans);
  color: var(--ink);
}

.eform input,
.eform textarea,
.eform select {
  font: 400 1rem var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  width: 100%;
}

.eform input:focus,
.eform textarea:focus,
.eform select:focus {
  outline: 2px solid var(--aqua);
  outline-offset: 1px;
  border-color: var(--aqua);
}

.eform textarea {
  min-height: 128px;
  resize: vertical;
}

@media (min-width: 640px) {
  .eform-row { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   NO-PHOTOGRAPH SAFETY NET

   sealwyn positions .scope-card absolutely against the hero photograph. It
   always has one, so it never needs this. A sitekit site that has not had
   its Flow set generated yet has an empty .opening-media, and the card then
   anchors against nothing and floats up over the masthead.

   This is not a design change -- it is a state sealwyn does not have. Every
   studio site is meant to carry its own photography, and when it does none
   of the rules below apply.
   -------------------------------------------------------------------------- */
.opening-media:not(:has(img)) {
  position: static;
  display: flex;
  align-items: center;
}

.opening-media:not(:has(img)) .scope-card {
  position: static;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* The "where we work" cards hold one link per area, and the link text is
   the full target phrase rather than a bare city name -- a bare name in a
   per-service card points at one page per service, which check.py fails as
   ambiguous anchor text.

   Full phrases do not fit on one comma-separated line, so they stack. This
   is the treatment sealwyn already gives .area-list a, applied to the same
   kind of list; it is not a new component. */
.state-grid li a:not(.more) {
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: .96rem;
}

.state-grid li .more { margin-top: 10px; }

/* The figure in the scope card is the most important number on the page and
   it was breaking across two lines ("$150-" / "400") whenever the label
   beside it ran long. The label may wrap; the number may not. */
.scope-price { align-items: baseline; gap: 12px; }
.scope-price span { min-width: 0; }
.scope-price strong { white-space: nowrap; }