/* =========================================================
   ДАРСИ — блок со статьями. Светлая тема.
   ========================================================= */

.blog{
  --ink:#1B1418;
  --ink-2:#4A4046;
  --ink-3:#8A7F86;
  --hair:#E7DDE1;
  --tint:#FBF5F6;
  --rose-dark:#C07E93;

  position:relative;
  padding:clamp(56px,7vw,110px) var(--pad-x);
  background:
    radial-gradient(80% 60% at 96% 0%, #F7E6EA 0%, rgba(247,230,234,0) 58%),
    radial-gradient(70% 60% at 0% 100%, #EFEAE4 0%, rgba(239,234,228,0) 60%),
    #FAF6F4;
  color:var(--ink);
  letter-spacing:-.022em;
}
.blog__inner{width:100%; max-width:var(--maxw); margin:0 auto}

/* ---------- шапка ---------- */
.blog__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:clamp(28px,3.4vw,48px);
}
.blog__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1; letter-spacing:-.015em;
  margin:0; max-width:20ch;
}
.blog__all{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:clamp(48px,3.2vw,56px); padding:0 clamp(22px,1.8vw,30px);
  background:var(--accent-grad); color:var(--accent-ink);
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  transition:background .25s ease, transform .2s ease;
}
.blog__all:hover{background:var(--accent-grad-hi); transform:translateY(-1px)}
.blog__all svg{width:14px; height:14px; fill:currentColor; transition:transform .25s ease}
.blog__all:hover svg{transform:translateX(3px)}

/* ---------- сетка ---------- */
.blog__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,1.6vw,26px);
}

/* ---------- карточка ---------- */
.post{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hair);
  overflow:hidden;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.post:hover{
  border-color:var(--rose-dark);
  transform:translateY(-4px);
  box-shadow:0 26px 50px -32px rgba(70,35,48,.55);
}

.post__media{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--tint)}
.post__media img{
  max-width:none;
  position:absolute; inset:-1px;
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.3,1);
}
.post:hover .post__media img{transform:scale(1.05)}

.post__body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:clamp(18px,1.5vw,26px);
}
.post__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
  font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
}
.post__tag{
  padding:5px 10px; background:var(--tint); border:1px solid var(--hair);
  color:var(--rose-dark); font-weight:600; letter-spacing:.06em;
}
.post__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(18px,1.4vw,23px); line-height:1.16; letter-spacing:-.015em;
  margin:0 0 10px;
}
.post__txt{
  margin:0 0 18px; font-size:clamp(13px,.95vw,14.5px); line-height:1.45;
  letter-spacing:-.03em; color:var(--ink-2);
}
.post__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:-.03em; color:var(--ink);
}
.post__more svg{width:13px; height:13px; fill:var(--rose-dark); transition:transform .25s ease}
.post:hover .post__more svg{transform:translateX(3px)}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1000px){
  .blog__grid{grid-template-columns:repeat(2, 1fr)}
  .blog__grid > :nth-child(3){grid-column:1 / -1}
  .blog__grid > :nth-child(3) .post__media{aspect-ratio:21/9}
}

@media (max-width:900px){
  /* кнопка уезжает под карточки статей */
  .blog__inner{display:flex; flex-direction:column}
  .blog__head{display:contents}
  .blog__title{order:1; max-width:none; margin-bottom:clamp(24px,4vw,34px)}
  .blog__grid{order:2}
  .blog__all{order:3; width:100%; margin-top:clamp(24px,4vw,34px)}
}

@media (max-width:720px){
  .blog{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .blog__grid{grid-template-columns:1fr}
  .blog__grid > :nth-child(3){grid-column:auto}
  .blog__grid > :nth-child(3) .post__media{aspect-ratio:16/11}
}