/* ampeco/tw-office — LAYOUT + states only. Structure + most visuals are Tailwind
   utilities (DS tokens) in render.php. Colours here use DS theme-reactive custom
   props (--c-* / --p-* / --color-white), never hardcoded hex. 1:1 with careers.css
   `.ob*`. */

.tw-office { position: relative; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.tw-office:hover { box-shadow: var(--c-shadow-2); transform: translateY(-4px); border-color: transparent; }

/* Whole-card → Google Maps as a stretched overlay link (can't nest <a> in <a>).
   The contact mailto:/tel: link sits ABOVE it so it stays independently clickable;
   width:fit-content keeps the contact hit-area to its text (rest of card → map). */
.tw-office__stretch { position: absolute; inset: 0; z-index: 1; }
.tw-office__contact { position: relative; z-index: 2; width: fit-content; }
.tw-office__contact:hover { text-decoration: underline; }

/* Uploaded office image fills the 156px map area. */
.tw-office__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Default locale map inlined as SVG (so its pulsing pin animates). The wrapper
   spans the tile; the SVG's own viewBox + preserveAspectRatio="slice" cover it. */
.tw-office__img--svg { display: block; line-height: 0; }
.tw-office__img--svg svg { width: 100%; height: 100%; display: block; }

/* HQ badge — brand fill, white text. */
.tw-office__hq { background: var(--c-brand); color: var(--color-white); }

.tw-office__city { letter-spacing: -0.01em; }

/* Brand contact row + its icon; underline on card hover (per design). */
.tw-office__contact svg { width: 16px; height: 16px; flex: none; }
.tw-office:hover .tw-office__contact { text-decoration: underline; }

/* Remote-first banner: subtle frost gradient bg (DS frost primitives). */
.tw-office--remote {
	background: linear-gradient(135deg, var(--p-frost-100) 0%, var(--p-frost-300) 100%);
}
.tw-office--remote:hover { transform: none; box-shadow: none; border-color: var(--c-line-brand); }

/* Globe icon = design `.ob--remote .ic` (38px). The theme's app.css forces
   `.nds-icon svg { width:100% !important }`, so the svg follows its WRAPPER — size
   the wrapper (the .nds-icon-38 sizing class isn't reliably loaded here). */
.tw-office__remote-ic .nds-icon { width: 38px; height: 38px; }

/* Heading → text gap = design `.ob--remote__text h3 { margin: 0 0 2px }`. The theme's
   global `.h3, h3` adds 2rem margin-bottom; override it back to the tight 2px. */
.tw-office__remote-text h3 { margin: 0 0 2px; }
.tw-office__remote-text p { margin: 0; }

/* Mobile: remote banner stacks. */
@media ( max-width: 720px ) {
	.tw-office--remote { flex-direction: column; align-items: flex-start; }
}