/* GRID 3/2/1 */
.materials-wrap{
  max-width:100%;
  overflow-x:hidden;
}

.materials-wrap .materials-grid{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0, 1fr);
  max-width:100%;
}

@media (min-width:640px){
  .materials-wrap .materials-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (min-width:1024px){
  .materials-wrap .materials-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Kortti & flip (kiinteä korkeus 420px kaikille) */
.materials-wrap .material-card{ perspective:1000px; }
.materials-wrap .material-card .material-card-inner{
  position:relative; width:100%; height:420px;
  -webkit-transform-style:preserve-3d; /* FIX: WebKit 3D */
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.materials-wrap .material-card:hover .material-card-inner,
.materials-wrap .material-card:focus-within .material-card-inner{ transform: rotateY(180deg); }

.materials-wrap .material-front,
.materials-wrap .material-back{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; /* FIX: WebKit backface */
  backface-visibility:hidden; height:100%;
}

/* FRONT */
.materials-wrap .material-front{
  background-size:cover; background-position:center center;
  background-color:#a8c0c6; position:relative; height:100%;
  transform:rotateY(0deg); /* FIX: front explicit 0deg so backface hides correctly */
}
.materials-wrap .material-front::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); pointer-events:none;
}
.materials-wrap .material-front .pad{
  position:relative; z-index:1; height:100%; min-height:100%;
  padding:24px; display:flex; flex-direction:column; justify-content:space-between;
}
.materials-wrap .front-top{ align-self:flex-start; }

/* Front-bottom: rivi ja chip alle; pystysuuntainen keskitys */
.materials-wrap .front-bottom{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px;
}
.materials-wrap .front-row{
  display:flex; align-items:center; gap:10px;
}
.materials-wrap .front-icon{
  display:inline-flex; align-items:center; line-height:0;
}

/* Pieni label ikonin alle */
.materials-wrap .front-label{
  margin-top:4px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:#F8F5EF; opacity:.85;
}

/* Icon svg */
.materials-wrap .front-icon svg{
  width:24px; height:32px; display:block;
  color:#F8F5EF; fill:currentColor; stroke:currentColor;
}

/* BACK */
.materials-wrap .material-back{ transform: rotateY(180deg); height:100%; }
.materials-wrap .material-back{
  background:#62848C !important; border:0 !important;
}
.materials-wrap .material-back::before{ display:none !important; }
.materials-wrap .material-back-content{
  display:flex !important; flex-direction:column !important;
  justify-content:space-between !important; align-items:flex-start;
  gap:18px; height:100%; padding:24px; box-sizing:border-box;
}

/* Typography */
.materials-wrap .material-title{
  margin:0 0 8px 0; color:#ffffff !important;
  font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:800; font-size:36px; line-height:1.17;
}
@media (max-width:640px){ .materials-wrap .material-title{ font-size:28px; } }

/* Brief (HTML sallittu) */
.materials-wrap .material-brief{
  color:#ffffff !important;
  font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400; font-size:20px; line-height:1.2; opacity:.98;
}
@media (max-width:640px){ .materials-wrap .material-brief{ font-size:18px; } }

/* Author chip etupuolella */
.materials-wrap .author-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  background:rgba(0,0,0,.45); color:#F8F5EF;
  font-size:14px; line-height:1.2;
}
.materials-wrap .author-chip svg{
  width:14px; height:14px; display:block;
}

/* Filetype chip */
.materials-wrap .chip{
  background:#F8F5EF; color:#2E3E45;
  font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:600; font-size:16px; line-height:1.2;
  padding:12px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
}
.materials-wrap .chip .chip-text{ display:inline-block; }

/* Fokus */
.materials-wrap .chip:focus{ outline:2px solid #3B5A4C; outline-offset:2px; }

/* --- Clickability fix: enable pointer events on the back side when flipped --- */
.materials-wrap .material-back{ pointer-events: none; }
.materials-wrap .material-card:hover .material-back,
.materials-wrap .material-card:focus-within .material-back{ pointer-events: auto; }
.materials-wrap .material-card:hover .material-front,
.materials-wrap .material-card:focus-within .material-front{ pointer-events: none; }

/* Koko backsiden kattava linkki */
.materials-wrap .material-back-link{
  display:block;
  height:100%;
  width:100%;
  text-decoration:none;
  color:inherit;
}

/* Varmistetaan, että sisältö käyttäytyy kuten ennenkin linkin sisällä */
.materials-wrap .material-back-link .material-back-content{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Näkyvä focus-tila näppäimistölle */
.materials-wrap .material-back-link:focus-visible{
  outline:2px solid #F8F5EF;
  outline-offset:3px;
}

/* Estetään pitkien sanojen / URLien venytys mobiilissa */
.materials-wrap .material-title,
.materials-wrap .material-brief{
  word-wrap:break-word;
  overflow-wrap:anywhere;
  max-width:100%;
}

.materials-wrap .material-card,
.materials-wrap .material-card-inner{
  max-width:100%;
  box-sizing:border-box;
}

/* Filterit (buttons) */
.materials-filter{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:24px;
}
.materials-filter .mf-btn{
  border:1px solid #3B5A4C;
  background:#fff;
  padding:8px 14px;
  border-radius:999px;
  font:600 14px/1.2 "Work Sans", system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#3B5A4C;
  cursor:pointer;
}
.materials-filter .mf-btn.is-active,
.materials-filter .mf-btn[aria-pressed="true"]{
  background:#3B5A4C;
  color:#fff;
}
.materials-filter .mf-btn:focus{
  outline:2px solid #3B5A4C;
  outline-offset:2px;
}