/* Home · industries (patterns/home-industries.php): section head + eight industry cards.
   The card icon comes from the card's class (ic-restaurant · ic-interior · ic-realestate · ic-spa · ic-education · ic-event ·
   ic-retail · ic-overseas → icons/ind-<name>.svg); the card link is the heading link, stretched over the whole card.
   Pointer light and glowing edge: the card has the shared class dg-glow (base.js sets --mx / --my). */
.hm-industries{
  --hm-industries-ico:36px;
  --hm-industries-light:300px;
  --hm-industries-dim:.55;
  --hm-industries-lift:calc(var(--s-1) * -1);
  --hm-industries-shadow:0 18px 40px var(--shadow);
  --hm-industries-nudge:3px;
  --hm-industries-ring:2px;
  --hm-industries-ring-o:3px;
  --hm-industries-track:-0.015em;
  --hm-industries-draw:900ms;
  --hm-industries-z-light:-1;
  --hm-industries-z-link:3;
  padding-top:0; /* follows the services section directly, as in the design */
}

.hm-industries__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid)}
.hm-industries__grid > *{margin:0}

.hm-industries__item{--dg-glow-xy:1;position:relative;display:grid;gap:var(--gap-stack);align-content:start;padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);overflow:hidden;isolation:isolate;
  transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),border-color var(--dur) var(--ease-press),box-shadow var(--dur-m) var(--ease-out)}
.hm-industries__item > *{margin:0}
/* soft light under the pointer */
.hm-industries__item::before{content:"";position:absolute;inset:0;z-index:var(--hm-industries-z-light);opacity:0;background:radial-gradient(var(--hm-industries-light) circle at var(--mx) var(--my), var(--accent-tint), transparent 55%);transition:opacity var(--dur-m) var(--ease-out)}
.hm-industries__grid:hover .hm-industries__item{opacity:var(--hm-industries-dim)}
.hm-industries__grid .hm-industries__item:hover,.hm-industries__grid .hm-industries__item:has(.hm-industries__t a:focus-visible){opacity:1;transform:translateY(var(--hm-industries-lift));box-shadow:var(--hm-industries-shadow)}
.hm-industries__item:hover::before{opacity:1}

/* icon above the name */
.hm-industries__item.ic-restaurant{--hm-industries-icon:url(../../../icons/ind-restaurant.svg?ver=ad0c4e93)}
.hm-industries__item.ic-interior{--hm-industries-icon:url(../../../icons/ind-interior.svg?ver=170485d5)}
.hm-industries__item.ic-realestate{--hm-industries-icon:url(../../../icons/ind-realestate.svg?ver=2256edb5)}
.hm-industries__item.ic-spa{--hm-industries-icon:url(../../../icons/ind-spa.svg?ver=1113c2bc)}
.hm-industries__item.ic-education{--hm-industries-icon:url(../../../icons/ind-education.svg?ver=0eca68e0)}
.hm-industries__item.ic-event{--hm-industries-icon:url(../../../icons/ind-event.svg?ver=0b1e150f)}
.hm-industries__item.ic-retail{--hm-industries-icon:url(../../../icons/ind-retail.svg?ver=c2186b27)}
.hm-industries__item.ic-overseas{--hm-industries-icon:url(../../../icons/ind-overseas.svg?ver=d23abdd6)}
.hm-industries__t{font-size:var(--t-l);letter-spacing:var(--hm-industries-track)}
.hm-industries__t::before{content:"";display:block;width:var(--hm-industries-ico);height:var(--hm-industries-ico);margin-bottom:var(--gap-stack);background:var(--accent-fill);-webkit-mask:var(--hm-industries-icon) center / contain no-repeat;mask:var(--hm-industries-icon) center / contain no-repeat}
/* the icon draws itself in on hover */
.hm-industries__item:hover .hm-industries__t::before{animation:hm-industries-draw var(--hm-industries-draw) var(--ease-out)}
@keyframes hm-industries-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* the heading link covers the whole card */
.hm-industries__t a{color:inherit;text-decoration:none}
.hm-industries__t a::after{content:"";position:absolute;inset:0;z-index:var(--hm-industries-z-link);border-radius:inherit}
.hm-industries__t a:focus-visible{outline:none}
.hm-industries__item:has(.hm-industries__t a:focus-visible){outline:var(--hm-industries-ring) solid var(--accent);outline-offset:var(--hm-industries-ring-o)}
/* editor: no card-wide link overlay, so every paragraph in the card stays clickable for editing */
.editor-styles-wrapper .hm-industries__t a::after{content:none}

.hm-industries__d{color:var(--ink-2);font-size:var(--t-s)}
.hm-industries__slug{font:500 var(--t-2xs)/1.4 var(--font-mono);color:var(--ink-3);overflow-wrap:anywhere}
/* arrow in the top-right corner */
.hm-industries__slug::after{content:"";position:absolute;top:var(--s-5);right:var(--s-5);width:var(--icon-m);height:var(--icon-m);background:var(--ink-3);-webkit-mask:url(../../../icons/arrow.svg?ver=61b6bacd) center / contain no-repeat;mask:url(../../../icons/arrow.svg?ver=61b6bacd) center / contain no-repeat;transition:transform var(--dur-m) var(--ease-out),background-color var(--dur) var(--ease-press)}
.hm-industries__item:hover .hm-industries__slug::after{transform:translate(var(--hm-industries-nudge),calc(var(--hm-industries-nudge) * -1));background:var(--accent)}

@media (max-width: 991px){
  .hm-industries__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 767px){
  .hm-industries__grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .hm-industries__item,.hm-industries__item::before,.hm-industries__slug::after{transition:none}
  .hm-industries__grid .hm-industries__item:hover,.hm-industries__grid .hm-industries__item:has(.hm-industries__t a:focus-visible){transform:none}
  .hm-industries__item:hover .hm-industries__t::before{animation:none}
}
