/* ==========================================================================
   BanSek Trade — inner pages
   Loaded by o-nama.html and kontakt.html only. Everything shared with the
   homepage (tokens, buttons, mechanical layer, navbar, footer, widgets) still
   comes from main.css; this file adds only what those two pages introduce.

   1.  PAGE HERO (shared shell)
   2.  PROSE / LEAD / PULL-QUOTE
   3.  VALUE CARDS
   4.  BRAND CARDS (expandable)
   5.  BRANCH TEASER
   6.  QUICK CONTACT CARDS
   7.  CONTACT FORM
   8.  HOURS TABLE
   9.  ANSWER CHECKLIST
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HERO
   Same overlay stack and edge-trace as the homepage, roughly half the height
   and a single static photograph. Reuses .hero so the intro timeline, the
   spotlight and the armed reveal state all apply without a second code path.
   -------------------------------------------------------------------------- */
.hero--page {
  min-height: 44svh;
  /* Deep enough that a card band overlapping the bottom edge still clears the
     sub-line. */
  padding-bottom: clamp(64px, 9vh, 104px);
}

@media (min-width: 900px) {
  .hero--page {
    min-height: 52svh;
  }
}

/* A short hero puts the navbar over the brightest part of the photograph
   instead of the dark upper third the homepage gives it, so it gets its own
   bed. Sized to the nav, not the section, so it never reads as a band. */
.hero--page .hero__ov--top {
  z-index: 5;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0.88) 0%,
    rgba(5, 5, 5, 0.55) calc(var(--nav-h) * 0.85),
    rgba(5, 5, 5, 0) calc(var(--nav-h) + 56px)
  );
}

/* One static photograph instead of the slider track. */
.hero--page .hero__bg picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero--page .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--obj-pos, 50% 46%);
}

@media (max-width: 899px) {
  .hero--page .hero__bg img {
    object-position: var(--obj-pos-sm, 50% 44%);
  }
}

.hero--page .hero__title {
  max-width: 20ch;
  margin-bottom: 18px;
  font-size: var(--fs-h1-page);
}

.hero--page .hero__sub {
  margin-bottom: 0;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bs-gray);
  list-style: none;
}

.crumbs a {
  color: var(--bs-gray);
  transition: color var(--dur) var(--ease-out-quart);
}

.crumbs a:hover {
  color: var(--bs-lime);
}

.crumbs li + li::before {
  padding-right: 6px;
  content: "/";
  color: var(--bs-gray-dim);
}

.crumbs [aria-current] {
  color: var(--bs-silver);
}

/* --------------------------------------------------------------------------
   2. PROSE
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .split--wide-right {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.prose > * + * {
  margin-top: var(--stack-md);
}

.prose p {
  max-width: 62ch;
  line-height: 1.65;
}

.prose__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
}

.figure {
  position: relative;
  padding: 8px;
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  background: var(--bs-steel);
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.figure__caption {
  display: block;
  padding: 12px 6px 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* A quote carries the company's own words, so it gets the one lime bar on the
   page and nothing else does. */
.pullquote {
  position: relative;
  max-width: 22ch;
  padding: 6px 0 6px clamp(18px, 2.4vw, 28px);
  margin-top: var(--stack-lg);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  border-left: 3px solid var(--bs-lime);
}

.pullquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   2b. FIVE-UP STATS
   The homepage rule logic assumes an even count; with five cells the divider
   belongs to every cell except the first.
   -------------------------------------------------------------------------- */
.stats__grid--five .stat:nth-child(odd) .stat__rule {
  display: none;
}

@media (min-width: 560px) {
  .stats__grid--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .stats__grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .stats__grid--five .stat .stat__rule,
  .stats__grid--five .stat:nth-child(odd) .stat__rule {
    display: block;
  }

  .stats__grid--five .stat:first-child .stat__rule {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. VALUE CARDS
   -------------------------------------------------------------------------- */
.vgrid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--bs-line);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 620px) {
  .vgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .vgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--bs-carbon);
  transform-style: preserve-3d;
  transition: background-color var(--dur) var(--ease-out-quart);
}

.vcard:hover {
  background: var(--bs-steel);
}

.vcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vcard__icon {
  color: var(--bs-lime);
}

.vcard__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--ink-faint);
}

.vcard__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.vcard__body {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   4. BRAND CARDS
   A <details> per brand: an accordion on touch, and from 900px the summary
   line stays put while the body opens underneath. No JS, so it works before
   the bundle loads and with the CDN blocked.
   -------------------------------------------------------------------------- */
/* align-items: start so an open card grows alone instead of stretching its
   whole row and leaving the neighbour with a block of empty panel. */
.brands {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 760px) {
  .brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .brands--minor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.brand {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart);
}

.brand:hover {
  border-color: #333a42;
}

/* Lime hairline drawing across the top edge. */
.brand::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--bs-lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out-expo);
}

.brand:hover::before,
.brand[open]::before,
.brand:focus-within::before {
  transform: scaleX(1);
}

.brand__summary {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: clamp(18px, 2.4vw, 24px);
  cursor: pointer;
  list-style: none;
}

.brand__summary::-webkit-details-marker {
  display: none;
}

.brand__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.brand__tag {
  flex: none;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius-sm);
}

.brand__caret {
  flex: none;
  align-self: center;
  color: var(--ink-faint);
  transition: transform var(--dur) var(--ease-out-quart);
}

.brand[open] .brand__caret {
  transform: rotate(180deg);
}

.brand__body {
  padding: 0 clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 26px);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-body);
}

.brand__body p + p {
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   5. BRANCH TEASER (condensed network, o-nama)
   -------------------------------------------------------------------------- */
.bteaser {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.bteaser__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out-quart);
}

.bteaser__item:hover {
  border-color: #333a42;
}

.bteaser__city {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
}

.bteaser__role,
.bteaser__addr {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-muted);
}

.bteaser__role {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.bteaser__item[data-status="unconfirmed"] .bteaser__addr {
  font-style: italic;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   6. QUICK CONTACT CARDS
   Same overlap device as the homepage search band.
   -------------------------------------------------------------------------- */
.quick {
  position: relative;
  z-index: 2;
  margin-top: clamp(-64px, -3.5vw, -36px);
  padding-bottom: var(--section-pad-tight);
}

.quick__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 800px) {
  .quick__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.qcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--bs-steel);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 32px 64px -28px rgba(0, 0, 0, 0.95);
  transition: border-color var(--dur) var(--ease-out-quart);
}

.qcard:hover {
  border-color: #333a42;
}

/* The 24-hour line is the actual differentiator, so it is the one card that
   carries lime. */
.qcard--duty {
  border-color: rgba(204, 249, 12, 0.34);
}

.qcard--duty:hover {
  border-color: rgba(204, 249, 12, 0.6);
}

.qcard__head {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.qcard__head svg {
  flex: none;
  color: var(--ink-faint);
}

.qcard--duty .qcard__head {
  color: var(--bs-lime);
}

.qcard--duty .qcard__head svg {
  color: var(--bs-lime);
}

.qcard__value {
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  word-break: break-word;
}

.qcard__value:hover {
  color: var(--bs-lime);
}

.qcard__note {
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.qcard__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.copy-btn {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--bs-line);
  border-radius: var(--radius);
  transition:
    color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}

.copy-btn:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.copy-btn.is-done {
  color: var(--bs-lime);
  border-color: rgba(204, 249, 12, 0.5);
}

/* A lime dot that pulses only while motion is allowed; see animations.css. */
.pulse-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--bs-lime);
  border-radius: 50%;
}

.pulse-dot::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--bs-lime);
  border-radius: 50%;
  animation: duty-pulse 2.4s var(--ease-out-quart) infinite;
}

/* --------------------------------------------------------------------------
   7. CONTACT FORM
   -------------------------------------------------------------------------- */
.formwrap {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 980px) {
  .formwrap {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

.cform {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .cform {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

/* Floating label: the input carries a transparent placeholder so
   :placeholder-shown can tell "empty" from "typed in". */
.field {
  position: relative;
}

.field__label {
  position: absolute;
  top: 15px;
  left: 13px;
  z-index: 1;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform 180ms var(--ease-out-quart),
    color 180ms var(--ease-out-quart);
}

.field__control {
  width: 100%;
  min-height: 52px;
  padding: 18px 14px 6px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface-input);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition:
    border-color 180ms var(--ease-out-quart),
    box-shadow 180ms var(--ease-out-quart);
}

textarea.field__control {
  min-height: 140px;
  padding-top: 24px;
  line-height: 1.55;
  resize: vertical;
}

select.field__control {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.field__arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  pointer-events: none;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg);
}

.field__control:focus {
  outline: none;
  border-color: var(--bs-lime);
  box-shadow: 0 0 0 3px var(--bs-lime-glow);
}

/* Raised whenever the control is focused or holds a value. */
.field__control:focus + .field__label,
.field__control:not(:placeholder-shown) + .field__label,
.field select.field__control + .field__label,
.field--filled .field__label {
  transform: translateY(-13px) scale(0.78);
  color: var(--ink-muted);
}

.field__control:focus + .field__label {
  color: var(--accent-ink);
}

.field__error {
  display: none;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--bs-error);
}

.field.is-invalid .field__control {
  border-color: var(--bs-error);
}

.field.is-invalid .check input {
  outline: 2px solid var(--bs-error);
  outline-offset: 2px;
}

.field.is-invalid .field__error {
  display: block;
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-body);
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #1b1f24;
}

.check a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Off-screen but still focusable-free: bots fill it, people never see it. */
.honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-summary {
  display: none;
  grid-column: 1 / -1;
  padding: 14px 16px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--bs-error);
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

.form-summary.is-visible {
  display: block;
}

.form-success {
  display: none;
  gap: 14px;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.form-success.is-visible {
  display: flex;
}

.form-success svg {
  flex: none;
  margin-top: 2px;
  color: #4b8b1f;
}

.form-success h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--ink);
}

.form-success p {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-body);
}

.btn.is-busy {
  pointer-events: none;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   8. HOURS TABLE
   -------------------------------------------------------------------------- */
.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.hours caption {
  padding-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hours th,
.hours td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--bs-line);
}

.hours th {
  font-weight: 500;
  color: var(--ink);
}

.hours td {
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--ink-body);
}

.hours tr:last-child th,
.hours tr:last-child td {
  border-bottom: none;
}

.hours .is-duty th,
.hours .is-duty td {
  color: var(--bs-lime);
  background: rgba(204, 249, 12, 0.05);
}

/* --------------------------------------------------------------------------
   9. ANSWER CHECKLIST (form sidebar)
   -------------------------------------------------------------------------- */
.aside-card {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.aside-card__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-body);
}

.checklist li::before {
  flex: none;
  content: "—";
  color: var(--ink-faint);
}

.aside-card__note {
  margin-top: 16px;
  padding-top: 14px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-muted);
  border-top: 1px solid var(--hairline);
}