/* ===== Materials ===== */

/* ===== list variant (materials/list.html) ===== */
.materials-list{
  display: grid;
  gap: 10px;
}

.matrow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;

  background: rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 16px rgba(30,60,90,.06);
}

.matrow__title{
  font-weight: 900;
  color: rgba(45,58,69,.9);
  text-decoration: none;
}

.matrow__title:hover{
  text-decoration: underline;
}

.matrow__summary{
  font-size: 13px;
  color: rgba(45,58,69,.75);
  margin-top: 2px;
}

.matrow__meta{
  display: flex;
  gap: 6px;
  align-items: start;
  flex-wrap: wrap;
}

.empty-note{
  opacity: .6;
  font-weight: 800;
}

/* ===== feed variant (materials/feed.html) ===== */
.matfeed{
  display: grid;
  gap: 18px;
}

.matcard{

    /* background: rgba(255, 255, 255, .70); */
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 60px;
    /* box-shadow: 0 6px 16px rgba(30, 60, 90, .06); 0 6px 16px rgba(30,60,90,.06); */
  
}

.matcard__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.matcard__meta{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ===== material content blocks (materials/item.html + feed parts) ===== */
.mat__summary{
  color: rgba(45,58,69,.80);
  margin: 0 0 10px;
  line-height: 1.25;
}

.mat__meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.mat__content{
  background: rgb(238 245 249);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(30, 60, 90, .06);
    padding: 12px;
    margin-bottom: 12px;
}

.mat__text{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.25;
  color: rgba(45,58,69,.92);
}

.mat__block{
  margin-top: 14px;
}

.mat__blockhead{
  font-weight: 900;
  color: rgba(45,58,69,.78);
  margin-bottom: 8px;
}

.mat__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.mat__imgcard{
    margin: 0;
    background: rgba(255, 255, 255, .75);
    border-radius: 6px;
    box-shadow: 1px 3px 5px 0px rgb(30 60 90 / 60%);
    overflow: hidden;
}

.mat__img{
  display:block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.mat__cap{
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(45,58,69,.72);
}

.mat__list{
  margin: 0;
  padding-left: 16px;
  color: rgba(45,58,69,.82);
}

/* ===== HERO (feed + photoalbum item) ===== */
.mat__hero, .mat__hero_grad{
  position: relative;
  width: 100%;
  height: var(--material-hero-h);
  /* margin: -12px -12px 16px; */
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #e5e7eb; /* fallback */
}

/* fallback без картинки */
.mat__hero--fallback{
  background: linear-gradient(135deg, #e5e7eb, #cbd5f5);
}

.mat__hero_grad img, .mat__hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* filter: blur(12px); */
  transform: scale(1.05);
  /* transition: filter .4s ease; */
}
.mat__hero img{
  filter: blur(2px);
}

.mat__hero img:is([complete]){
  filter: blur(4);
}

/* затемнение */
.mat__hero_grad::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgb(238 245 249), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, 0));
 
}

/* текст поверх */
.mat__hero-content{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  z-index: 2;
}

.mat__hero-stack{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mat__hero-title{
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.mat__hero-title:hover{
  text-decoration: underline;
}

.mat__hero-subtitle{
  color: rgba(255,255,255,.92);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  max-width: 70ch;
}

/* =========================
   PHOTOALBUM block (page-css)
   ========================= */
.photoalbum{
  margin-top: 12px;
}

/* grid 2 -> 1 (requested) */
.photoalbum__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.photoalbum__item{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(30,60,90,.06);
  background: rgba(255,255,255,.75);
}

.photoalbum__link{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.photoalbum__img{
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* caption overlay */
.photoalbum__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 10px 10px 12px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.60),
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,0)
  );
}

.photoalbum__caption{
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* tiny modifier (future-proof, but same 2->1 now) */
/* .photoalbum__grid--preview{ }
.photoalbum__grid--full{ } */

/* ===== responsive ===== */
@media (max-width: 420px){
  :root{
    --material-hero-h: 160px;
  }

  .mat__hero-title{
    font-size: 1.05rem;
  }

  .matrow{
    grid-template-columns: 1fr;
  }

  .mat__img{
    height: 140px;
  }

  /* requested 2 -> 1 */
  .photoalbum__grid{
    grid-template-columns: 1fr;
  }

  .photoalbum__img{
    height: 160px;
  }

  .mat__hero-subtitle{
    font-size: 0.9rem;
  }
}


/* ===== PHOTOALBUM FLUSH ===== */

.mat__hero--flush{
  margin-bottom: 0 !important;
}

.mat__hero-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.mat__hero-desc{
  color:#fff;
  font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.photoalbum--flush{
  margin-top:2px;
}

.photoalbum__grid{
  gap:2px !important;
}

.photoalbum__item{
  border-radius:2px !important;
  box-shadow:none !important;
}

.photoalbum__grid--full{
  border-radius:0 0 12px 12px;
  overflow:hidden;
}

@media (max-width:420px){
  .photoalbum__grid{
    grid-template-columns:1fr 1.3fr;
  }
}


.photoalbum__grid--feed{ grid-template-columns: repeat(3, 1fr); }
@media (max-width:420px){ .photoalbum__grid--feed{ grid-template-columns: repeat(2, 1fr); } }





/* =========================
   GALLERY MODAL (full-screen viewer)
   ========================= */

.gmodal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}

.gmodal[aria-hidden="false"]{ display: block; }

.gmodal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
}

.gmodal__stage{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
}

.gmodal__media{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.gmodal__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.gmodal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.gmodal__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.gmodal__nav--prev{ left: 12px; }
.gmodal__nav--next{ right: 12px; }

.gmodal__nav[disabled]{
  opacity: .25;
  cursor: default;
}

.gmodal__caption{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;

  display: none; /* показываем только если есть текст */
}

@media (max-width: 420px){
  .gmodal__nav{ width: 46px; height: 46px; font-size: 34px; }
  .gmodal__close{ width: 40px; height: 40px; }
}