/* ============================================================
   tutorials-overview.css — Tutorials-Katalog im Stil von
   DigitalOcean Community: Sidebar, Hero-Panel mit Suche,
   Featured-Karten mit Bild, Ergebnis-Grid, Filter, Pagination.
   Nutzt die Theme-Variablen aus tutorials.css (dark/light).
   ============================================================ */

.tuts{padding:42px 0 72px}
.tuts-layout{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:start}

/* ---------- Sidebar ---------- */
.tuts-side{position:sticky;top:86px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-link{
  display:block;width:100%;text-align:left;
  padding:.5rem .75rem;border:0;border-radius:8px;cursor:pointer;
  background:none;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--muted);transition:background .15s,color .15s;
}
.side-link:hover{background:var(--hover-bg);color:var(--text)}
.side-link.on{background:linear-gradient(75deg,rgba(29,130,178,.28),rgba(63,178,220,.16));color:var(--text)}
.side-link b{font-weight:500;font-size:.78rem;color:var(--muted-2);margin-left:.35rem}
.side-h{margin:22px 0 8px;padding:0 .75rem;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.side-cta{
  margin-top:26px;padding:16px;border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(29,130,178,.22),rgba(63,178,220,.08));
}
.side-cta b{display:block;font-size:.95rem;color:var(--heading,var(--text))}
.side-cta p{margin:.5rem 0 .9rem;font-size:.82rem;line-height:1.5;color:var(--muted)}
.side-cta .btn{width:100%;justify-content:center;font-size:.85rem}

/* ---------- Hero-Panel mit Suche ---------- */
.tuts-hero{
  border:1px solid var(--line);border-radius:18px;
  padding:34px 34px 30px;
  background:
    radial-gradient(120% 160% at 100% 0%,rgba(169,230,248,.16),transparent 55%),
    linear-gradient(120deg,rgba(29,130,178,.24),rgba(63,178,220,.10) 70%,rgba(169,230,248,.06));
}
.tuts-hero h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800}
.tuts-hero p{margin-top:.4rem;color:var(--muted);font-size:.98rem}
.tuts-hero p b{color:var(--text)}
.tuts-search{
  margin-top:1.15rem;display:flex;align-items:center;gap:.65rem;
  padding:.72rem 1rem;border-radius:999px;
  background:var(--bg,#0F1112);border:1px solid var(--line);
  color:var(--muted-2);
  transition:border-color .15s,box-shadow .15s;
}
.tuts-search:focus-within{border-color:var(--primary-bright,#3BB3E6);box-shadow:0 0 0 3px rgba(59,179,230,.18)}
.tuts-search input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  font:inherit;font-size:.95rem;color:var(--text);
}
.tuts-search input::placeholder{color:var(--muted-2)}

/* ---------- Abschnitts-Titel ---------- */
.tuts-h2{margin:34px 0 16px;font-size:1.25rem;font-weight:700}

/* ---------- Karten (Featured + Ergebnisse) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.t-card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;
  background:var(--surface);
  transition:transform .16s ease,border-color .16s,box-shadow .16s;
}
.t-card:hover{transform:translateY(-3px);border-color:var(--primary-bright,#3BB3E6);box-shadow:var(--shadow-md,0 12px 30px rgba(0,0,0,.25))}

/* Bildbereich: Verlauf + Themen-Icon (generiert, keine Assets noetig) */
.t-vis{position:relative;display:grid;place-items:center;height:132px;flex-shrink:0}
.feat-grid .t-vis{height:168px}
.t-vis svg{width:52px;height:52px;opacity:.9;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}
.feat-grid .t-vis svg{width:64px;height:64px}
.t-vis::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1.6px 1.6px at 18% 30%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 22%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1.8px 1.8px at 84% 68%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1.3px 1.3px at 32% 78%,rgba(255,255,255,.35),transparent 60%);
}

/* Themen-Verlaeufe */
.vis-linux-basics{background:linear-gradient(135deg,#0B5C80,#1D82B2 55%,#3FB2DC)}
.vis-javascript{background:linear-gradient(135deg,#7A5C0B,#B28A1D 55%,#DCC63F)}
.vis-python{background:linear-gradient(135deg,#0B3D80,#1D5CB2 55%,#3F8CDC)}
.vis-ai-ml{background:linear-gradient(135deg,#4B0B80,#7A1DB2 55%,#A93FDC)}
.vis-ubuntu{background:linear-gradient(135deg,#80300B,#B2571D 55%,#DC8A3F)}
.vis-databases{background:linear-gradient(135deg,#0B6650,#1D9B7A 55%,#3FC9A9)}
.vis-security{background:linear-gradient(135deg,#800B1D,#B21D38 55%,#DC3F5E)}
.vis-mysql{background:linear-gradient(135deg,#0B5266,#1D7E9B 55%,#3FAEC9)}
.vis-docker{background:linear-gradient(135deg,#083B66,#0E5E9B 55%,#2489CF)}
.vis-kubernetes{background:linear-gradient(135deg,#1B2A78,#2E44B0 55%,#5A74E0)}
.vis-tutorial{background:linear-gradient(135deg,#25404E,#3A5D70 55%,#57829B)}

.t-body{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:16px 18px 18px}
.t-badge{
  align-self:flex-start;
  padding:.22rem .6rem;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#0B2533;background:linear-gradient(75deg,#3FB2DC,#A9E6F8);
}
.t-card h3{font-size:1.02rem;line-height:1.35;font-weight:700;color:var(--heading,var(--text))}
.t-meta{font-size:.8rem;color:var(--muted-2)}
.t-view{
  margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.85rem;font-weight:700;color:var(--accent-text,#3FB2DC);
}
.t-card:hover .t-view svg{transform:translateX(3px)}
.t-view svg{transition:transform .16s ease}

/* ---------- Filterleiste ---------- */
.tuts-filters{
  display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;
  padding:14px 16px;margin-bottom:18px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
}
.tuts-filters label{
  display:flex;flex-direction:column;gap:.3rem;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted-2);
}
.tuts-filters select{
  appearance:none;
  padding:.5rem 2rem .5rem .75rem;border-radius:9px;
  border:1px solid var(--line);background:var(--bg,#0F1112);color:var(--text);
  font:inherit;font-size:.88rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23768493' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
}
.tuts-count{margin-left:auto;font-size:.85rem;color:var(--muted)}

/* ---------- Leermeldung ---------- */
.tuts-none{padding:40px 0;text-align:center;color:var(--muted)}

/* ---------- Pagination ---------- */
.tuts-pages{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:30px;flex-wrap:wrap}
.tuts-pages button{
  min-width:38px;height:38px;padding:0 .6rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--muted);font:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.tuts-pages button:hover:not(:disabled){background:var(--hover-bg);color:var(--text)}
.tuts-pages button.on{background:linear-gradient(75deg,#1D82B2,#3FB2DC);border-color:transparent;color:#fff}
.tuts-pages button:disabled{opacity:.35;cursor:default}
.tuts-pages .ell{color:var(--muted-2);padding:0 .2rem}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .feat-grid,.res-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  /* minmax(0,1fr) statt 1fr: Eine 1fr-Spalte ist implizit min-width:auto
     und waechst mit ihrem nicht umbrechbaren Inhalt - die Chip-Leiste
     (white-space:nowrap) blies die Spalte auf 1415px auf, sodass
     overflow-x nie greifen konnte (Messung 24.08.2026, iPhone 14). */
  .tuts-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .tuts-side{position:static;min-width:0}
  .side-h{margin-top:14px}
  /* Sidebar-Themen als horizontale Chip-Leiste */
  .side-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;max-width:100%}
  .side-link{white-space:nowrap;flex-shrink:0;min-height:44px;display:flex;align-items:center}
  .side-cta{display:none}
}
@media (max-width:640px){
  /* Schriftgroessen anheben: .68rem Versalien (9,5px) und .8rem Meta
     (11,2px) sind auf dem Telefon zu klein - 12px ist die Untergrenze,
     unter der Text muehsam wird (Messung 24.08.2026). */
  .t-badge{font-size:.75rem}
  .t-meta{font-size:.82rem}
  .tuts-count{font-size:.88rem}
  .feat-grid,.res-grid{grid-template-columns:1fr}
  .tuts-hero{padding:24px 20px}
  .tuts-filters{gap:10px}
  .tuts-filters label{flex:1 1 42%}
  .tuts-filters select{width:100%;min-height:44px}
  /* Das Suchfeld mass innen nur 21px Hoehe - ein Tap nahe am Rand traf
     den Container, nicht das Eingabefeld. 16px Schrift verhindert
     zusaetzlich den Auto-Zoom von iOS Safari beim Fokussieren. */
  .tuts-search input{min-height:28px;font-size:16px}
  .tuts-search{padding:.6rem 1rem}
  /* Paginierung: 38x38 war unter der 44px-Empfehlung */
  .tuts-pages button{min-width:44px;min-height:44px}
  .tuts-count{margin-left:0;flex-basis:100%}
}