/* ============================================================
   The offices, in two looks.

   `row`   — the mockup's .lcta__offices / .lcta__office (styles/lithography.css):
             five countries across the foot of a band, everything visible.
   `cards` — the mockup's .ctlocs .cloc (styles/contact.css): a stack of cards
             beside a contact form, each opening onto its street address.

   The ROW is surface-agnostic on purpose: the mockup states #fff and
   rgba(255,255,255,.5) because its only copy sits on the cinematic band, but the
   contact page wants the same row on white. So every colour there comes from the
   section skeleton's foreground variables, which are already correct for the
   surface the row lands on.

   The CARDS are not, and that is the same call blocks/form/style.css makes for
   the form card: a bordered white panel is a panel on ANY band, including a dark
   one, and its tokens are stated rather than inherited so a dark section's
   --vt-fg never reaches the address inside it.
   ============================================================ */

.vt-locations {
  list-style: none;
  margin: 0;
  /* The UA's padding-inline-start is 40px, and with the global border-box that
     inset is spent INSIDE the declared width — so the list keeps its right edge
     but loses 40px on the left, and the cards stop lining up with whatever sits
     above them in the column (on the contact page, the facade photograph).
     Every other list block in this plugin resets it; this one has to too. */
  padding: 0;
  /* The list spans its column: a flex/grid child of a section's stack must claim
     its width or it collapses to min-content. See BLOCKS.md trap 9. */
  width: 100%;
}

/* ------------------------------------------------------------
   look: row
   ------------------------------------------------------------ */

.vt-locations--row {
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  /* follows the section's justification — centred on the closing CTA, left
     wherever the row is used in a left-aligned stack */
  justify-content: var(--vt-align, center);
  gap: 14px 44px;
  /* the mockup's rgba(255,255,255,.12) hairline, said in terms of the surface */
  border-top: 1px solid color-mix(in srgb, var(--vt-fg, var(--color-text)) 14%, transparent);
}

.vt-locations--row .vt-locations__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: var(--vt-text-align, center);
}

.vt-locations--row .vt-locations__country {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.3;
  color: var(--vt-fg, var(--color-text));
}

/* The mockup sets this line at 50% white, which measures ~4.2:1 on the
   cinematic band at 12px uppercase and misses AA. --vt-fg-subtle is 78% white
   on a dark surface and the muted grey on a light one — the same fix the
   eyebrow and the key-figure label already carry. */
.vt-locations--row .vt-locations__line {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vt-fg-subtle, var(--color-text-muted));
}

.vt-locations--row .vt-locations__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.vt-locations--row .vt-locations__link {
  font-size: 13px;
  color: var(--vt-fg-muted, var(--color-text-muted));
  text-decoration: none;
}
.vt-locations--row .vt-locations__link:hover {
  color: var(--vt-fg, var(--color-link-hover));
  text-decoration: underline;
}

/* Phones: two columns of offices rather than one tall stack — five countries
   one per line is a lot of scrolling for a footer note. */
@container vt-section (max-width: 600px) {
  .vt-locations--row { gap: 18px 24px; }
  .vt-locations--row .vt-locations__item { flex: 1 1 40%; }
}

/* ------------------------------------------------------------
   look: cards — the mockup's .ctlocs
   ------------------------------------------------------------ */

.vt-locations--cards {
  display: grid;
  gap: 12px;
}

/* ---- the card edge: the ROW decides, the card reads ----
   The `Card border` toggle (inc/card-border.php) lives on the row, so the edge
   travels down as an inherited custom property. The bare row states the CARD
   level as well as its own: a :hover — and on the product cards the flagship's
   own tint — sets the token ON the card, and a value set on an element always
   beats one inherited from its ancestor, whatever the specificity. */
.vt-locations { --vt-card-edge: var(--color-border); }
.vt-locations.vt-cards-bare,
.vt-locations.vt-cards-bare .vt-locations__card,
.vt-locations.vt-cards-bare .vt-locations__head--flat,
.vt-locations.vt-cards-bare .vt-locations__card:hover { --vt-card-edge: transparent; }

.vt-locations--cards .vt-locations__card,
.vt-locations--cards .vt-locations__head--flat {
  background: var(--color-surface);
  border: 1px solid var(--vt-card-edge, var(--color-border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* stated, not inherited: the panel is light on a dark band too */
  color: var(--color-text);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.vt-locations--cards .vt-locations__card:hover {
  --vt-card-edge: var(--color-light-purple-40);
  /* the mockup's rgba(160, 104, 177, .22) — the lavender token, alpha mixed
     here, per the rule that no token carries an opacity */
  box-shadow: 0 10px 34px color-mix(in srgb, var(--color-light-purple) 22%, transparent);
}

/* `list-style: none` AND `::-webkit-details-marker` — the first kills the
   triangle everywhere modern, the second in older WebKit, which is what the
   mockup states. */
.vt-locations--cards .vt-locations__head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}
.vt-locations--cards .vt-locations__head::-webkit-details-marker { display: none; }

/* A <summary> is a button: it needs a visible focus state, and the mockup has
   none to port. The site's own ring. */
.vt-locations--cards .vt-locations__head:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-lg);
}

/* nothing to disclose: the same box, minus the affordances */
.vt-locations--cards .vt-locations__head--flat { cursor: default; }

.vt-locations--cards .vt-locations__headmain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vt-locations--cards .vt-locations__country {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-dark-purple);
}

.vt-locations--cards .vt-locations__roles {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.vt-locations--cards .vt-locations__chev {
  display: flex;
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform var(--dur-base) var(--ease-standard);
}
.vt-locations--cards .vt-locations__chev svg { width: 18px; height: 18px; display: block; }
.vt-locations--cards .vt-locations__card[open] .vt-locations__chev { transform: rotate(180deg); }

.vt-locations--cards .vt-locations__detail { padding: 0 18px 18px; }

.vt-locations--cards .vt-locations__name {
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0 0 6px;
}

.vt-locations--cards .vt-locations__addr {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

.vt-locations--cards .vt-locations__tel,
.vt-locations--cards .vt-locations__email { margin: 0; }

.vt-locations--cards .vt-locations__link {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
}
.vt-locations--cards .vt-locations__link:hover {
  color: var(--color-dark-purple);
  text-decoration: underline;
}

/* Reduced motion: the chevron's flip is the one animation here worth keeping —
   it is a state change, not decoration — but it goes with the rest of the
   stack's transitions when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
  .vt-locations--cards .vt-locations__card,
  .vt-locations--cards .vt-locations__chev { transition: none; }
}