/* ============================================================
   Industries hub — page-specific styles.
   The finder (search, chips, count, empty state) stays in primestart.css
   because the locations hub shares it. Everything about industry cards,
   their photograph slot, the examples strip and the feature grid lives
   here and loads on /industries/ only.
   ============================================================ */

/* ---- grid + card ---- */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
/* each grid cell is a finder wrapper; make the card fill it so rows stay level */
.ind-grid > *{display:flex;flex-direction:column;min-width:0}
.ind-grid .ind-card{flex:1 1 auto}
.ind-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.ind-card:hover{border-color:#CFC7B9;transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(18,33,47,.45)}
.ind-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---- photograph: full-bleed 16:9 across the top of the card, cropped never
        stretched, corners follow the card radius via overflow:hidden ---- */
.ind-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#E9E3D8}
.ind-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease}
.ind-card:hover .ind-media img{transform:scale(1.035)}
.ind-media-none{background:linear-gradient(135deg,#E9E3D8,#D7CFC1)}

/* ---- card body: 24px padding, title, 2-3 line description, one CTA ---- */
.ind-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.ind-name{font-family:var(--fh);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-0.028em;color:var(--ink)}
.ind-blurb{
  margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ind-card .ind-more{margin-top:auto;padding-top:18px}
.ind-more{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:-0.02em;color:var(--orange-dk)}
.ind-more i{font-style:normal;display:inline-block;transition:transform .2s ease}
.ind-card:hover .ind-more i,.ind-feature:hover .ind-more i,.ind-example:hover .ind-more i{transform:translateX(3px)}

.ind-cat-head{margin:48px 0 0;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line)}
[data-finder-group]:first-of-type .ind-cat-head{margin-top:36px}

/* ---- category chips: wrap on desktop, one smooth scrolling row on phones ---- */
.ind-filters .finder-chip{min-height:40px}

/* ---- why industry matters: four worked examples ---- */
.ind-examples{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ind-example{
  display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:24px 24px 22px;color:inherit;text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
a.ind-example:hover{border-color:#CFC7B9;transform:translateY(-2px)}
a.ind-example:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.ind-example-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk)}
.ind-example-h{font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.022em;line-height:1.4;color:var(--ink)}
.ind-example .ind-more{margin-top:auto;padding-top:6px}

/* ---- industries in more detail ---- */
.ind-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ind-feature{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white);color:inherit;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.ind-feature:hover{border-color:#CFC7B9;transform:translateY(-2px)}
.ind-feature:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.ind-feature .ind-media{aspect-ratio:2.2/1}
.ind-feature-body{display:flex;flex-direction:column;gap:9px;padding:26px 28px 28px}
.ind-feature-name{font-family:var(--fh);font-weight:700;font-size:21px;letter-spacing:-0.03em}
.ind-feature-blurb{color:var(--muted);font-size:15.5px;line-height:1.55}
.ind-feature .ind-more{margin-top:6px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .ind-grid{grid-template-columns:1fr 1fr}
  .ind-examples{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .ind-feature-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ind-grid{grid-template-columns:1fr;gap:16px}
  .ind-examples{grid-template-columns:1fr}
  /* chips become a single scrolling row with a soft fade at the edge */
  .ind-filters{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 24px 10px 2px;margin-right:calc(-1 * var(--pad));
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  }
  .ind-filters::-webkit-scrollbar{display:none}
  .ind-filters .finder-chip{flex:none;scroll-snap-align:start;font-size:14.5px;padding:10px 16px}
  .ind-cat-head{margin-top:40px}
  /* single column: allow a fourth line so no description is cut mid-sentence */
  .ind-blurb{-webkit-line-clamp:4}
}
@media (max-width:430px){
  .ind-body{padding:20px 20px 22px}
  .ind-name{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .ind-card,.ind-feature,.ind-example,.ind-media img,.ind-more i,.dir-ph-site{transition:none}
  .ind-card:hover .ind-media img{transform:none}
}

/* ============================================================
   THE DIRECTORY FINDER SCENE (motion.js + hero-industries.js)
   A PrimeStart-styled panel: the site search, the category chips and a
   grid of industry cards. It is searched for "restaurant", the match is
   chosen, the panel becomes the restaurants page and the website inside
   the phone scrolls to its foot and back to the top. Plays once; the
   opened page, resting at the top, is the end state and the
   no-JavaScript state. On a phone the same interface sits inside a phone.

   9 September 2026: moved out of the old .hero-ind hero (removed - the page
   now takes the standard shared hero with a photograph) into its own
   section, "SEARCH YOUR INDUSTRY", directly below it. .hero-ind .wrap's
   two-column grid is gone with that hero; .dir is centred and held to
   roughly the width that column gave it instead of stretching to the full
   1200px .wrap, which a fixed-height directory panel was never drawn for.
   ============================================================ */
.dir[data-view="page"] .dir-list{opacity:0;transform:translateX(-24px);pointer-events:none}
.dir[data-view="list"] .dir-page{opacity:0;transform:translateX(24px);pointer-events:none}
/* the site search, as it is on the directory below */
@keyframes dirSwap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* the restaurants page in miniature */
/* the restaurant's website: taller than the screen, moved by transform so the
   scroll is smooth; --dur is set by the script for each leg of the journey */
/* the page's parts arrive in order */
@media (max-width:640px){
  /* someone searching the directory on their phone. Matches
     here rather than losing to the wider rule despite coming later. */
}

/* ============================================================
   Who we build for: the categories (MASTER SPECIFICATION, screenshot 05
   RED beneath the hero). Categories as a hairline grid of plain links -
   crawlable, scannable, and not a wall of cards.
   ============================================================ */
.ind-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 40px;border-top:1px solid var(--ink);padding-top:32px}
.ind-cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 12px;font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.ind-cat-h span{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.ind-cat-list{list-style:none;margin:0;padding:0}
.ind-cat-list li{border-top:1px solid var(--line)}
.ind-cat-list a{display:block;padding:9px 0;font-size:15px;color:var(--ink-2)}
.ind-cat-list a:hover{color:var(--orange-dk)}
.ind-cat-more a{font-family:var(--fh);font-weight:700;color:var(--orange-dk);letter-spacing:-0.01em}
.ind-cat-more i{font-style:normal;display:inline-block;margin-left:4px}
@media (max-width:1040px){.ind-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ind-cat-grid{grid-template-columns:1fr;gap:26px;padding-top:24px}}