:root{--card-bg:#fff;--bg:#f5f7fb;--accent:#2b7cf6}
  body{font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;padding:24px;color:#111}
  .container{max-width:1100px;margin:0 auto}
  header{display:flex;gap:12px;align-items:center;margin-bottom:18px}
  .logo{font-weight:700;color:var(--accent);font-size:20px}
  .controls{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
  input[type="search"]{padding:10px 12px;border-radius:8px;border:1px solid #d7dbe5;min-width:240px}
  .tag-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
  .tag-btn{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #e1e5ef;font-size:13px;cursor:pointer}
  .tag-btn.active{background:var(--accent);color:white;border-color:var(--accent)}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
  @media (max-width:920px){ .grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .grid{grid-template-columns:1fr;} }
  .card{background:var(--card-bg);border-radius:10px;padding:12px;border:1px solid #e6e9f2;display:flex;flex-direction:column;gap:10px;transition:transform .08s,box-shadow .08s;min-height:260px}
  .top{display:flex;gap:10px;align-items:flex-start}
  .thumb{width:92px;height:132px;border-radius:6px;flex:0 0 92px;background:#eef2ff;background-size:cover;background-position:center;border:1px solid #e6e9f2}
  .meta{flex:1;display:flex;flex-direction:column;gap:8px}
  .title{font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:8px}
  .desc{font-size:13px;color:#394151;line-height:1.3;max-height:3.9em;overflow:hidden}
  .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .tag{font-size:12px;padding:4px 8px;background:#f2f6ff;border-radius:999px;color:#2b4ea6}
  /* links area: фиксированная высота, кнопки — одинаковой высоты */
  .links-wrap{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:auto;
  }
  .link-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #e2e6f4;
    background:#fff;
    color:#1746b6;
    font-size:14px;
    cursor:pointer;
    text-decoration:none;
    box-sizing:border-box;
    min-height:42px;
  }
  .link-btn.secondary{background:#f7f9ff;color:#2b4ea6;border-color:#e9eefc}
  .link-btn.placeholder{background:#fbfbfd;color:#9aa3b2;border-style:dashed;cursor:default}
  .link-btn.placeholder:disabled{opacity:1}
  footer{margin-top:18px;color:#6b7280;font-size:13px}

/* --- Mobile tweaks: вставьте в конец CSS --- */
@media (max-width:620px) {
  :root{
    --card-bg:#fff;
    --bg:#f7f8fb;
    --accent:#2b7cf6;
  }

  html,body{font-size:16px}
  body{padding:16px;background:var(--bg)}

  .container{max-width:680px;padding:0 8px}
  header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:12px}
  .logo{font-size:18px}
  .controls{margin-left:0;justify-content:space-between;gap:8px}

  input[type="search"]{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border-radius:10px;
    font-size:15px;
    box-shadow:0 1px 0 rgba(16,24,40,0.02);
  }

  .tag-filter{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    margin-top:6px;
  }
  .tag-btn{
    flex:0 0 auto;
    padding:8px 10px;
    font-size:13px;
    border-radius:999px;
  }

  .grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:12px;
  }

  .card{
    padding:12px;
    border-radius:12px;
    min-height:0;
    box-shadow:0 6px 18px rgba(18,23,51,0.04);
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .card:active{transform:translateY(1px)}
  .top{gap:12px}
  .thumb{
    width:84px;
    height:120px;
    flex:0 0 84px;
    border-radius:8px;
  }
  .title{font-size:15px}
  .desc{font-size:14px;color:#404b5a;line-height:1.35;max-height:4.05em}
  .tags{gap:6px}
  .tag{font-size:12px;padding:5px 8px;border-radius:999px}

  .links-wrap{flex-direction:column;gap:8px;margin-top:10px}
  .link-btn{
    min-height:44px;
    padding:10px 12px;
    font-size:15px;
    border-radius:10px;
  }
  .link-btn.secondary{background:#f7f9ff}

  footer{
    margin-top:14px;
    font-size:13px;
    text-align:center;
    color:#6b7280;
    padding-bottom:8px;
  }

  /* Accessibility & spacing adjustments for small screens */
  .card:focus-within{outline:2px solid rgba(43,124,246,0.12);outline-offset:4px}
  .tag-btn:focus,.link-btn:focus{box-shadow:0 0 0 4px rgba(43,124,246,0.08)}
}
/* Collapse tags */
.tag-filter-wrapper{display:flex;flex-direction:column;gap:8px}
.tag-filter-row{display:flex;align-items:center;gap:8px}
.tag-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center;transition:max-height .22s ease;overflow:hidden}
.tag-filter.collapsed{max-height:40px} /* высота одной строки тегов */
.tag-filter.expanded{max-height:800px} /* достаточно для полноценного разворота */

.toggle-tags-btn{
  padding:6px 10px;border-radius:8px;border:1px solid #e2e6f4;background:#fff;color:#1746b6;font-size:13px;cursor:pointer;
}
.toggle-tags-btn:focus{outline:2px solid rgba(43,124,246,0.12);outline-offset:2px}