/*
 * business-cards-by-industry.css — CL-04 By-Industry hub (fc_v2/ind_v1 re-port, 2026-07-27).
 * PAGE-UNIQUE CSS ONLY. Everything else — hero (.fw-hero), trust strip, g3-band, the
 * ind-section chassis, recommended cards, guidance table, moments, samples, design-help,
 * FAQ, worth-knowing, sticky-cta — comes from the shared henry_coolgray/henry_fc/henry_ind
 * sheets loaded via $_META in www/business-cards-by-industry.php. This wave otherwise has
 * ZERO page-unique CSS by design; if a future change appears to need more than the block
 * below, that is a finding to surface, not a file to grow.
 *
 * The ONLY thing here is #gallery: no IND page has an equivalent (a photo-comparison
 * gallery is unique to this hub), and Henry's own tier3-industry mockup ships zero CSS for
 * it (.ind-gallery/.gitem/.ph appear nowhere in the ind-components-v01 block) — so per the
 * wave board's own call, this is carried forward from the page's pre-fc_v2 build rather
 * than invented as a new shared component for a single consumer.
 */
.ind-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:820px){.ind-gallery{grid-template-columns:1fr 1fr}}
.gitem{margin:0}
.gitem figcaption{font-size:13px;color:var(--body);margin-top:10px;text-align:center;font-weight:600;line-height:1.4}
.ph{height:180px;border-radius:12px;background:linear-gradient(135deg,#EDF1F4,#dde6ec);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;border:1px dashed #c4d0d8;text-align:center;padding:10px}
.ph.has-photo{position:relative;background:none;border:none;padding:0;overflow:hidden}
.ph.has-photo .gallery-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}

/* #guidance table.fin mobile overflow fix (measured 2026-07-27, 375px: 402px scrollWidth,
   27px horizontal overflow). table.fin{width:100%} in henry_ind.css uses the browser's default
   AUTO table layout, which sizes each column to its content's preferred (unwrapped) width before
   fitting to 100% — that holds on every sibling IND page because their column-1 labels are finish
   names (Foil/Suede/Spot UV — short, few unbreakable characters). This page's column-1 labels are
   INDUSTRY names (Financial Advisors, Designers & Agencies) whose longest unbreakable word alone
   needs more room, so the sum of the three columns' preferred widths exceeds the viewport. Scoped
   to #guidance (this page's own id) and to the width table.fin actually overflows at — never
   touches the shared henry_ind.css rule other IND pages rely on. */
@media(max-width:480px){
  #guidance table.fin{table-layout:fixed}
  #guidance table.fin th,#guidance table.fin td{overflow-wrap:break-word;word-break:break-word}
}