/* =====================================================================
   Industries Archive (template-industries-archive.php)
   Ported from the "new home v3/industries" design. Loaded after
   home-v3.css and scoped under .hv3: tokens, the hero title, buttons,
   chips, tags and the final CTA card (.ccard / .cform) come from there.
   ===================================================================== */

.hv3 .btn--line { background: #fff; border-color: var(--line); color: var(--navy); }
.hv3 .btn--line:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.hv3 .ihero { position: relative; padding: 72px 0 0; }
.hv3 .ihero__glow { position: absolute; inset: 0 0 auto 0; height: 640px; background:
	radial-gradient(50% 60% at 82% 0%, var(--sky-30), transparent 70%),
	radial-gradient(34% 44% at 8% 12%, rgba(139,92,246,.12), transparent 70%); pointer-events: none; z-index: 0; }
.hv3 .ihero .container { position: relative; z-index: 1; }
.hv3 .ihero__head { text-align: center; margin-bottom: 56px; }
.hv3 .ihero__head .v3-hero__cta { justify-content: center; margin-top: 28px; }

/* =====================================================================
   2. INDUSTRY CARDS — wide card + 1 in the first row, then 3 per row
   ===================================================================== */
.hv3 .agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hv3 .acard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 26px; min-height: 340px; transition: opacity .8s ease-in-out, transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.hv3 .acard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.hv3 .acard__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hv3 .acard__ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 26px; transition: background .25s, color .25s, border-color .25s; }
.hv3 .acard__ic .ic { font-size: 21px; stroke-width: 1.8; }
.hv3 .acard__ic img { width: 24px; height: 24px; object-fit: contain; transition: filter .25s; }
.hv3 .acard__who { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.hv3 .acard h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 10px; }
.hv3 .acard p { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
.hv3 .acard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.hv3 .acard__tags li { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--text); }
.hv3 .acard__go { margin-top: auto; align-self: flex-start; }
.hv3 .acard__go::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-2xl); } /* whole card is the link target */

/* hover: icon and button turn black */
.hv3 .acard:hover .acard__ic,
.hv3 .acard:hover .acard__go { background: var(--navy); border-color: var(--navy); color: #fff; }
.hv3 .acard:hover .acard__ic img { filter: brightness(0) invert(1); }

/* wide first card: copy left, image (or the data-map illustration) right */
.hv3 .acard--feat { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; background: linear-gradient(140deg, var(--surface) 40%, var(--surface-2)); }
.hv3 .acard__media { align-self: center; min-width: 0; }
.hv3 .acard__media img { width: 100%; height: auto; max-height: 300px; object-fit: contain; border-radius: var(--r-lg); }
.hv3 .amock { align-self: center; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 16px 16px 8px; font-size: 12px; }
.hv3 .amock__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hv3 .amock__head b { font-size: 13px; font-weight: 700; color: var(--navy); }
.hv3 .sysrows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.hv3 .sysrows li > i { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; }
.hv3 .sysrows li > i .ic { font-size: 14px; }
.hv3 .sysrows b { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.hv3 .sysrows small { display: block; font-size: 11px; color: var(--muted); }

/* dark highlight card */
.hv3 .acard--cta { background: linear-gradient(140deg, var(--navy), var(--blue-900) 70%, var(--blue)); border-color: transparent; overflow: hidden; }
.hv3 .acard--cta::before { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(191,219,254,.3), transparent 68%); pointer-events: none; }
.hv3 .acard--cta .acard__ic { background: rgba(255,255,255,.12); border-color: transparent; color: var(--sky); }
.hv3 .acard--cta .acard__ic img { filter: brightness(0) invert(1); }
.hv3 .acard--cta .acard__who { color: rgba(255,255,255,.7); }
.hv3 .acard--cta h2 { color: #fff; }
.hv3 .acard--cta p { color: rgba(255,255,255,.78); }
.hv3 .acard--cta .acard__tags li { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.88); }
.hv3 .acard--cta:hover { border-color: transparent; }
.hv3 .acard--cta:hover .acard__ic { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.hv3 .acard--cta:hover .acard__go { background: var(--sky); border-color: transparent; color: var(--navy); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
	.hv3 .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.hv3 .ihero { padding-top: 48px; }
	.hv3 .ihero__head { margin-bottom: 40px; }
}
@media (max-width: 640px) {
	.hv3 .agrid { grid-template-columns: 1fr; }
	.hv3 .acard { min-height: 0; padding: 22px; }
	.hv3 .acard--feat { grid-column: span 1; grid-template-columns: 1fr; gap: 22px; }
}