/* =========================================================
   SHOWA EU — „Kesztyűkeresés veszélyforrás szerint” áttekintő lap.

   Használja: ../../../template-showa-hazard.php.

   A styles.css és az article.css HARMADIK rétege, nem a helyettesítőjük:
   a sablon mindhármat betölti, ez jön utoljára. Ami közös a főoldallal
   (rács, .container, .title/.body-copy, .finder-*, .stay-connected), az a
   styles.css-ben ül; ami a belső lapokon jelenik meg először (morzsamenü,
   .banner.inner-banner geometriája), az az article.css-ben — ide csak a
   veszélyforrás-csemperács kerül.

   A szabályok az eredeti showagroup.com/eu-en/hazard/ stíluslapjából
   (themes/showa/assets/css/app.min.css `.range-protective-gloves`,
   `.icon-card`) valók: ugyanazok az osztálynevek, méretek, színek és
   töréspontok. Két szándékos eltérés:

     1. a kártyarács flex-alapú (az eredeti Bootstrap-oszlopokat használ,
        amiből a theme csak a .col-md-4-et hozza) — a látvány ugyanaz;
     2. fénykép nélküli veszélyforrásnál a képhely nem üres, hanem a SHOWA
        sötét tintája (.card-image--empty). A rács így akkor sem törik meg,
        ha a sávba új veszélyforrás kerül, amihez még nincs fotó.

   MINDEN szabály a .blf-showa burkoló alá van tolva — lásd a styles.css
   fejlécében, hogy miért kötelező (a theme main.css-e ugyanazon a lapon fut,
   és a .container / .title / .card-title nevek generikusak).
   ========================================================= */

/* =========================================================
   SZEKCIÓ
   ========================================================= */
.blf-showa .range-protective-gloves{padding:60px 0 20px; position:relative}
@media (max-width:1200px){ .blf-showa .range-protective-gloves{padding:50px 0 20px} }
@media (max-width:720px){ .blf-showa .range-protective-gloves{padding:40px 0 10px} }

.blf-showa .range-protective-gloves .container{position:relative}

/* Az eredetin a szekciócím <h3>; itt <h2>, mert a lap <h1>-e a banner címe —
   a méret marad az eredeti h3-é (a styles.css .title h2-je 42px lenne). */
.blf-showa .range-protective-gloves .title h2{
  font-weight:900; font-size:26px; line-height:32px; margin-bottom:20px;
}
@media (max-width:1200px){
  .blf-showa .range-protective-gloves .title h2{font-size:24px; line-height:30px}
}

/* A háttér halvány vonalpárjai. Az eredetin abszolút pozicionált, 100vw-nél
   szélesebb sávok — dekoráció, ezért egérrel/olvasóval elérhetetlenek. */
.blf-showa .range-protective-gloves .card-row{position:relative; z-index:1}
.blf-showa .range-protective-gloves .card-row .industries-lines{
  position:absolute; width:100vw; left:-90%; height:575px; top:0; bottom:0;
  margin-top:30px; pointer-events:none;
}
.blf-showa .range-protective-gloves .card-row .industries-lines + .industries-lines{margin-top:1100px}
.blf-showa .range-protective-gloves .card-row .industries-lines span{
  width:100%; background:rgba(235,235,235,.5); display:block; height:11px; position:relative;
}
.blf-showa .range-protective-gloves .card-row .industries-lines span + span{margin-top:11px}
@media (max-width:990px){ .blf-showa .range-protective-gloves .card-row .industries-lines{display:none} }

/* =========================================================
   CSEMPERÁCS

   Az eredeti .col-md-4-eken ül; itt flexbe van szedve, hogy a hézag és a
   törés a csempeszámtól függetlenül ugyanaz maradjon.
   ========================================================= */
.blf-showa .range-protective-gloves .card-row{
  display:flex; flex-wrap:wrap; margin:0 -15px;
}
.blf-showa .range-protective-gloves .card-row .industry-listing{
  flex:0 0 33.333333%; max-width:33.333333%; padding:0 15px; margin-top:30px;
}
@media (max-width:990px){
  .blf-showa .range-protective-gloves .card-row .industry-listing{flex:0 0 50%; max-width:50%}
}
@media (max-width:720px){
  .blf-showa .range-protective-gloves .card-row{margin:0}
  .blf-showa .range-protective-gloves .card-row .industry-listing{
    flex:0 0 100%; max-width:100%; padding-left:0; padding-right:0;
  }
}

/* =========================================================
   EGY CSEMPE
   ========================================================= */
.blf-showa .icon-card{position:relative; display:flex; flex-flow:column; max-width:350px}
@media (max-width:990px){ .blf-showa .icon-card{max-width:100%} }

.blf-showa .icon-card .card-image{
  border-radius:0 0 25px; position:relative; margin-bottom:10px; overflow:hidden;
}
/* Az arány a kártyáé, nem a fájlé: a zöld karika fixen top:95px-en ül, ezért
   egy magasabb fotó elcsúsztatná az ikont és a rács sorait. A nem 379×162-es
   kép így középre igazítva vágódik, nem torzul. */
.blf-showa .icon-card .card-image img{
  display:block; width:100%; max-width:100%; height:auto; border-radius:0 0 25px;
  aspect-ratio:379 / 162; object-fit:cover; object-position:center;
  transition:transform .4s ease-in-out;
}
.blf-showa .icon-card:hover .card-image img{transform:scale(1.05)}

/* Fénykép nélküli veszélyforrás: a képhely a SHOWA sötét tintája marad, hogy a
   fehér ikon a korongon ugyanúgy olvasható legyen. Az arány az eredeti
   379×162-es kivágásé. */
.blf-showa .icon-card .card-image--empty{
  aspect-ratio:379 / 162;
  background:linear-gradient(135deg,#2b2929 0%,#1c1b1a 60%,#232121 100%);
}

.blf-showa .icon-card .card-image .img-overlay{
  transition:background-color .5s ease-in-out; background-color:rgba(33,32,32,.3);
  position:absolute; top:0; left:0; height:100%; width:100%;
}

/* A zöld karika a képre lóg, benne a sötét korong a fehér ikonnal — ugyanaz a
   két gyűrű, mint a keresősáv csempéin, csak nagyobb. */
.blf-showa .icon-card .label-icon{
  background-color:var(--green,#8fc547); height:85px; width:85px;
  display:flex; align-items:center; justify-content:space-around;
  border-radius:50%; border:2px solid #fff;
  position:absolute; top:95px; right:25px; z-index:10;
}
.blf-showa .icon-card .label-icon .icon-wrap{
  background-color:#231f20; height:75px; width:75px;
  display:flex; align-items:center; justify-content:space-around;
  border-radius:50%; border:2px solid #fff;
}
.blf-showa .icon-card .label-icon .icon-wrap .icon-inner{
  width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:#fff;
}
.blf-showa .icon-card .label-icon .icon-wrap .icon-inner img,
.blf-showa .icon-card .label-icon .icon-wrap .icon-inner svg{max-width:100%; height:auto}

/* A cím a karika alatt fut ki, ezért nem ér alá. */
.blf-showa .icon-card .card-title{max-width:calc(100% - 125px)}
.blf-showa .icon-card .card-title h3{
  font-weight:900; font-size:18px; line-height:24px; color:#000;
  transition:color .4s ease-in-out; margin:0;
}
.blf-showa .icon-card:hover .card-title h3{color:var(--green,#8fc547)}
.blf-showa .icon-card:focus-visible{outline:2px solid var(--green,#8fc547); outline-offset:4px}

@media (max-width:720px){
  .blf-showa .icon-card .card-title{padding-left:15px; padding-right:15px}
  .blf-showa .icon-card .card-title h3{font-size:16px; line-height:18px}
}

@media (prefers-reduced-motion:reduce){
  .blf-showa .icon-card .card-image img,
  .blf-showa .icon-card .card-title h3{transition:none}
  .blf-showa .icon-card:hover .card-image img{transform:none}
}