@charset "utf-8";
/* ═══ GoodWay home · section 3 · THE SERVICE BAY ═══════════════════════════
   The shop's own photos on the left (its storefront, the tires stacked
   inside); on the right its window, made readable: the services lettered on
   dark glass in a black storefront frame, a pane for each group with the
   mullion between them, and the transom above with the open sign hanging in
   it (the shop's live hours: tq.site.js keeps every .tq-open current). The
   installation line shows the price list's price and a running promotion.
   Once, when the window comes into view, a car's lights pass across the
   glass (Scripts/gw.sec3.js adds .is-lit).
   Torque: the kit's head, buttons, media and open sign; this file adds the
   bay's layout, the glass and its lettering. Drawn by Services/HomeServiceBay.vb.
   Mobile first: the phone, then 768 (photos side by side, panes side by side),
   then 1180 (photos beside the window).
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s3 {
  position: relative;
  padding-block: var(--tq-section);
  border-block-start: 1px solid var(--tq-line);
  background: var(--tq-surface);
  color: var(--tq-text-body);
}
.gw-s3__head { margin-block-end: var(--tq-sp-9); }
.gw-s3__head .tq-head__lead { max-inline-size: 56ch; text-wrap: pretty; }
.gw-s3__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-4); }

/* ── the bay ──────────────────────────────────────────────────────────────── */
.gw-s3__bay { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tq-sp-8); }

/* the photos: each fills its box, whatever its own shape */
.gw-s3__shop { display: flex; flex-direction: column; gap: var(--tq-sp-5); margin: 0; min-inline-size: 0; }
.gw-s3__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tq-sp-4); }
.gw-s3__photo { position: relative; box-shadow: var(--tq-el-2); }
.gw-s3__photo > picture { position: absolute; inset: 0; display: block; }
.gw-s3__photo > img, .gw-s3__photo > picture > img { position: absolute; inset: 0; }
.gw-s3__photo--main { aspect-ratio: 4 / 3; }
.gw-s3__photo--main img { object-position: 50% 40%; }
.gw-s3__photo--more { aspect-ratio: 3 / 1; }

.gw-s3__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tq-sp-3) var(--tq-sp-7);
  font-size: var(--tq-fs-sm);
  line-height: 1.45;
  color: var(--tq-text-muted);
}
.gw-s3__addr { display: inline-flex; align-items: flex-start; gap: var(--tq-sp-3); min-inline-size: 0; }
.gw-s3__addr .tq-i { inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--tq-text-subtle); }
.gw-s3__dir {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-2);
  border-radius: var(--tq-r-xs);
  font-weight: var(--tq-fw-semibold);
  color: var(--tq-accent-text);
  text-decoration: none;
}
.gw-s3__dir .tq-i { inline-size: 16px; block-size: 16px; }
.gw-s3__dir:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-s3__dir:focus-visible { outline: none; box-shadow: var(--tq-ring); }

/* ── the window ───────────────────────────────────────────────────────────
   Dark glass in the black aluminium of a storefront. .tq-dark flips every
   role inside it, so the lettering, the open sign and the focus ring are the
   dark set's. The daylight on the glass is ::before; ::after is the light
   that passes once.                                                        */
.gw-s3__glass {
  --gw-s3-frame: var(--tq-ink-100);
  --gw-s3-bar: 6px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  border: var(--gw-s3-bar) solid var(--gw-s3-frame);
  border-radius: var(--tq-r-sm);
  background: linear-gradient(172deg, var(--tq-graphite-800) 0%, var(--tq-graphite-900) 58%, var(--tq-ink-100) 100%);
  color: var(--tq-text-body);
  box-shadow: 0 30px 60px -28px rgb(var(--tq-steel-rgb) / .55), 0 2px 6px -2px rgb(var(--tq-steel-rgb) / .25);
}
.gw-s3__glass::before {                  /* daylight on the glass */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 16%, rgb(var(--tq-white-rgb) / .055) 16% 27%, transparent 27% 31%,
                    rgb(var(--tq-white-rgb) / .03) 31% 34%, transparent 34%),
    radial-gradient(120% 70% at 85% 0%, rgb(var(--tq-white-rgb) / .05), transparent 60%);
}
.gw-s3__glass::after {                   /* a car's lights pass, once */
  content: "";
  position: absolute;
  inset-block: -25%;
  inset-inline-start: -45%;
  z-index: 2;
  inline-size: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--tq-white-rgb) / .12) 45%, rgb(var(--tq-white-rgb) / .18) 50%, rgb(var(--tq-white-rgb) / .12) 55%, transparent);
  opacity: 0;
  transform: skewX(-16deg);
}
.gw-s3__glass.is-lit::after { animation: gw-s3-pass 1.7s var(--tq-ease-in-out) .15s 1 both; }
@keyframes gw-s3-pass {
  0%   { opacity: 0; transform: skewX(-16deg) translateX(0); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-16deg) translateX(520%); }
}

/* the transom above the panes, with the open sign hanging in it */
.gw-s3__transom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--tq-sp-4) var(--tq-sp-6);
  border-block-end: var(--gw-s3-bar) solid var(--gw-s3-frame);
  background: rgb(var(--tq-black-rgb) / .2);
}
.gw-s3__sign { margin: 0; max-inline-size: 100%; }
.gw-s3__sign .tq-open {
  white-space: normal;
  padding: 5px var(--tq-sp-5) 5px var(--tq-sp-4);
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-full);
  background: rgb(var(--tq-black-rgb) / .35);
  font-size: var(--tq-fs-xs);
  line-height: 1.35;
}

/* a pane, and the bar between two: across on a phone, the mullion when side by side */
.gw-s3__pane {
  display: flex;
  flex-direction: column;
  gap: var(--tq-sp-6);
  min-inline-size: 0;
  padding: var(--tq-sp-8) var(--tq-sp-6) var(--tq-sp-9);
}
.gw-s3__pane + .gw-s3__pane { border-block-start: var(--gw-s3-bar) solid var(--gw-s3-frame); }
.gw-s3__group {
  margin: 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.2;
  letter-spacing: .05em;
  color: var(--tq-text-muted);
}

/* the lettering */
.gw-s3__list { display: flex; flex-direction: column; gap: var(--tq-sp-6); margin: 0; padding: 0; list-style: none; }
.gw-s3__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tq-sp-2); min-inline-size: 0; }
.gw-s3__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tq-sp-1) var(--tq-sp-5);
  inline-size: 100%;
}
.gw-s3__name {
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--tq-text-strong);
  text-shadow: 0 1px 0 rgb(var(--tq-black-rgb) / .45);
  text-wrap: balance;
}
.gw-s3__price {
  flex: none;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-medium);
  letter-spacing: .02em;
  color: var(--tq-text-muted);
  white-space: nowrap;
}
.gw-s3__price b { font-size: var(--tq-fs-xl); font-weight: var(--tq-fw-bold); letter-spacing: .01em; color: var(--tq-accent-text); }
.gw-s3__text { margin: 0; max-inline-size: 46ch; font-size: var(--tq-fs-sm); line-height: 1.5; color: var(--tq-text-muted); text-wrap: pretty; }
.gw-s3__promo {
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-3);
  margin: var(--tq-sp-2) 0 0;
  max-inline-size: 46ch;
  font-size: var(--tq-fs-sm);
  line-height: 1.45;
  color: var(--tq-text-body);
}
.gw-s3__promo .tq-i { inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--tq-accent-text); }
.gw-s3__go {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-2);
  margin-block-start: var(--tq-sp-2);
  padding: 0;
  border: 0;
  border-radius: var(--tq-r-xs);
  background: none;
  font: inherit;
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  color: var(--tq-accent-text);
  text-decoration: none;
  cursor: pointer;
}
.gw-s3__go .tq-i { inline-size: 16px; block-size: 16px; transition: transform var(--tq-d-fast) var(--tq-ease); }
.gw-s3__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-s3__go:hover .tq-i { transform: translateX(2px); }
.gw-s3__go:focus-visible { outline: none; box-shadow: var(--tq-ring); }

/* ── the phone ────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .gw-s3__actions > .tq-btn { flex: 1 1 100%; }
  .gw-s3__glass { --gw-s3-bar: 5px; }
}

/* ── 768: the two photos side by side, the panes side by side ─────────────── */
@media (min-width: 768px) {
  .gw-s3__head { margin-block-end: var(--tq-sp-10); }
  .gw-s3__shop--2 .gw-s3__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-s3__photo--more { aspect-ratio: 4 / 3; }
  .gw-s3__shop:not(.gw-s3__shop--2) .gw-s3__photo--main { aspect-ratio: 16 / 10; }
  .gw-s3__glass--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-s3__glass--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gw-s3__glass--2 .gw-s3__pane + .gw-s3__pane,
  .gw-s3__glass--3 .gw-s3__pane + .gw-s3__pane { border-block-start: 0; border-inline-start: var(--gw-s3-bar) solid var(--gw-s3-frame); }
  .gw-s3__pane { gap: var(--tq-sp-7); padding: var(--tq-sp-9) var(--tq-sp-8) var(--tq-sp-10); }
  .gw-s3__list { gap: var(--tq-sp-7); }
  .gw-s3__transom { padding-inline: var(--tq-sp-8); }
}

/* ── 1180: the photos beside the window, as tall as it ────────────────────── */
@media (min-width: 1180px) {
  .gw-s3__bay { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tq-sp-9) var(--tq-sp-10); }
  .gw-s3__bay--photo, .gw-s3__bay--glass { grid-template-columns: minmax(0, 1fr); }
  .gw-s3__bay--photo .gw-s3__shop { max-inline-size: 760px; }
  .gw-s3__shop--2 .gw-s3__photos { display: flex; flex: 1 1 auto; flex-direction: column; }
  .gw-s3__shop--2 .gw-s3__photo--main { flex: none; }
  .gw-s3__shop--2 .gw-s3__photo--more { flex: 1 1 auto; min-block-size: 140px; aspect-ratio: auto; }
  .gw-s3__shop:not(.gw-s3__shop--2) { align-self: start; }
  .gw-s3__shop:not(.gw-s3__shop--2) .gw-s3__photo--main { aspect-ratio: 4 / 3; }
  .gw-s3__bay:not(.gw-s3__bay--glass) .gw-s3__glass--3 { grid-template-columns: minmax(0, 1fr); }
  .gw-s3__bay:not(.gw-s3__bay--glass) .gw-s3__glass--3 .gw-s3__pane + .gw-s3__pane { border-inline-start: 0; border-block-start: var(--gw-s3-bar) solid var(--gw-s3-frame); }
  .gw-s3__pane { padding-inline: var(--tq-sp-9); }
  .gw-s3__transom { padding-inline: var(--tq-sp-9); }
}

@media (prefers-reduced-motion: reduce) {
  .gw-s3__glass.is-lit::after { animation: none; }
}
@media (forced-colors: active) {
  .gw-s3__glass, .gw-s3__transom, .gw-s3__pane + .gw-s3__pane { border-color: CanvasText; }
}