/* Web & Tools – Gallery Cards (Rechentools) */

.section__head{max-width:72ch;}

.media-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:18px;}
@media (min-width:720px){.media-grid{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media (min-width:1100px){.media-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}

.media-card{
  display:grid;
  grid-template-rows:auto 1fr;
  text-decoration:none;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line, rgba(255,255,255,.10));
  background:var(--surface, rgba(255,255,255,.03));
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.media-card:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong, rgba(255,255,255,.18));
  background:var(--surface-strong, rgba(255,255,255,.05));
}
.media-card:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:3px;}

.media-card__thumb{position:relative;aspect-ratio:16/9;background:rgba(255,255,255,.04);}
.media-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02) contrast(1.02);}

.media-card__badge{
  position:absolute;left:12px;top:12px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
}
.media-card__icon{
  position:absolute;right:12px;bottom:12px;
  width:38px;height:38px;border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.40);backdrop-filter:blur(10px);
  color:rgba(255,255,255,.92);
}

.media-card__body{padding:14px 14px 16px;}
.media-card__title{margin:0 0 8px 0;font-size:18px;line-height:1.2;}
.media-card__text{margin:0 0 12px 0;color:var(--muted, rgba(255,255,255,.74));line-height:1.45;}

.meta-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;}
.meta-tags li{
  font-size:12px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.86);
}

.subsection{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);}
.subsection__title{margin:0 0 8px 0;font-size:18px;}
.subsection__lead{margin:0 0 14px 0;color:var(--muted, rgba(255,255,255,.74));max-width:72ch;}

.media-card--placeholder{cursor:default;}
.media-card__thumb--placeholder{
  display:grid;place-items:center;
  background:radial-gradient(1200px 400px at 30% 20%, rgba(255,255,255,.06), transparent 60%),
             rgba(255,255,255,.03);
}
.placeholder-mark{
  font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;
  border:1px dashed rgba(255,255,255,.22);
  color:rgba(255,255,255,.78);
}

.category-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:16px;}
@media (min-width:720px){.category-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}

.category-tile{
  display:block;text-decoration:none;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.category-tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);}
.category-tile__title{font-size:16px;margin:0 0 6px 0;}
.category-tile__meta{color:rgba(255,255,255,.74);line-height:1.4;}

.section--compact{padding-top:26px;}