/** JakToMám — Homepage CSS. Extracted from index.php. */

  body { background: linear-gradient(180deg, #f7f9fd 0%, #eef4ff 60%, #f7f9fd 100%); background-attachment: fixed; }

  /* ── Full-screen hero s 3D demem ───────────────────────────────────────────── */
  #hp-hero-wrap {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 520px;
    max-height: 860px;
    background: var(--color-nav, #1a1a2e);
    overflow: hidden;
  }
  #hp-demo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #hp-demo canvas { display: block; }

  /* Nadpis — nahoře ve volném nebi */
  .hp-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 2.6rem 2rem 0;
    text-align: center;
    z-index: 10;
    pointer-events: none;
  }
  .hp-top h1 {
    font-size: clamp(1.5rem, 3.8vw, 2.3rem);
    line-height: 1.2; font-weight: 700;
    color: #f0ecff; margin: 0 0 .55rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
  }
  .hp-lead {
    font-size: .97rem; color: rgba(240,236,255,.85);
    line-height: 1.55; margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
  }
  .hp-tagline2 {
    font-size: .85rem; color: rgba(200,195,220,.5);
    font-style: italic; margin: .35rem 0 0; line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
  }

  /* Tlačítka — dole ve volném prostoru */
  .hp-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 2rem 2.4rem;
    text-align: center;
    z-index: 10;
  }
  .hp-ctas {
    display: flex; gap: .75rem;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: .65rem;
  }
  .hp-btn-primary {
    padding: .7rem 2rem; background: #F7F7F7;
    color: var(--color-nav, #1a1a2e); border-radius: 0;
    font-size: .98rem; text-decoration: none;
    font-weight: 600; transition: background .15s;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }
  .hp-btn-primary:hover { background: #7c3aed; color: white; }
  .hp-btn-secondary {
    padding: .7rem 2rem; background: rgba(255,255,255,.1);
    background: rgba(255,255,255,.8 );
    color: rgb(103, 102, 105); border: 1px solid rgba(255,255,255,.15);
    border-radius: 0; font-size: .98rem;
    text-decoration: none; transition: background .12s, border-color .12s;
  }
  .hp-btn-secondary:hover { background: #7c3aed; color: rgb(255, 255, 255); }
  .hp-btn-highlight {
    padding: .7rem 2rem;
    background: linear-gradient(135deg, var(--color-shadow, #7c3aed), #a855f7);
    color: #fff; border: none; border-radius: 0;
    font-size: .98rem; text-decoration: none;
    font-weight: 600; transition: background .15s, transform .1s;
    box-shadow: 0 3px 12px rgba(124,58,237,.25);
  }
  .hp-btn-highlight:hover { transform: translateY(-1px); box-shadow: 0 5px 20px rgba(124,58,237,.5); }
  .hp-btn-mini {
    padding: .45rem 1.1rem;
    line-height: 2;
    background: rgba(255,255,255,.8 );
    color: rgb(170, 168, 176); border: 1px solid rgba(255,255,255,.15);
    border-radius: 0; font-size: .8rem;
    text-decoration: none; transition: background .12s, color .12s;
  }
  .hp-btn-mini:hover { background: #7c3aed;; color: rgb(255, 255, 255); }

  @media (max-width: 600px) {
    .hp-top { padding-top: 1.5rem; }
    .hp-top h1 { font-size: 1.35rem; }
    .hp-bottom { padding-bottom: 1.5rem; }
  }

  /* Demo popisek */
  .hp-demo-caption {
    text-align: center;
    font-size: .75rem; color: #8888aa;
    padding: .55rem 0 .7rem;
    letter-spacing: .03em;
    background: var(--color-nav, #1a1a2e);
  }

  /* ── Feature cards (demo showcase) — astro-hero style ────────────────────── */
  .hp-features-wrap {
    position: relative;
    overflow: hidden;
    padding: 64px 24px;
    background: linear-gradient(180deg, #f7f9fd 0%, #eef4ff 100%);
    isolation: isolate;
  }
  .hp-features-wrap::before,
  .hp-features-wrap::after {
    content: "";
    position: absolute;
    border-radius: 0;
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
  }
  .hp-features-wrap::before {
    width: 420px; height: 420px;
    right: -100px; top: -80px;
    background: radial-gradient(circle at center, rgba(79,143,232,.14) 0%, rgba(79,143,232,.05) 40%, transparent 70%);
  }
  .hp-features-wrap::after {
    width: 340px; height: 340px;
    left: -80px; bottom: -100px;
    background: radial-gradient(circle at center, rgba(139,92,246,.10) 0%, rgba(139,92,246,.04) 40%, transparent 70%);
  }
  .hp-features-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #182033;
    text-align: center;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .hp-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .hp-fcard {
    position: relative;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 0;
    box-shadow: 0 12px 36px rgba(37,60,120,.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden; text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-fcard::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(79,143,232,.18), rgba(139,92,246,.10), rgba(79,143,232,.06));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .hp-fcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(37,60,120,.15);
  }
  .hp-fcard-img {
    width: 100%; height: 120px; object-fit: cover; display: block;
  }
  .hp-fcard-body {
    padding: .85rem 1rem 1rem;
    flex: 1; display: flex; flex-direction: column;
  }
  .hp-fcard-title {
    font-size: .95rem; font-weight: 700;
    color: #182033;
    margin-bottom: .3rem;
  }
  .hp-fcard-desc {
    font-size: .82rem;
    color: #5f6b85;
    line-height: 1.55;
    flex: 1;
  }
  .hp-fcard-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem; font-weight: 700;
    color: #2e6fd0;
    margin-top: .5rem;
    transition: gap .15s ease;
  }
  .hp-fcard:hover .hp-fcard-link { gap: 8px; }

  @media (max-width: 900px) {
    .hp-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  }
  @media (max-width: 480px) {
    .hp-features-wrap { padding: 44px 16px; }
    .hp-features { grid-template-columns: 1fr; gap: 14px; max-width: 360px; }
    .hp-fcard { flex-direction: row; border-radius: 0; }
    .hp-fcard-img { width: 100px; height: auto; min-height: 100px; border-radius: 0; }
    .hp-fcard-body { padding: .7rem .8rem; }
    .hp-fcard-title { font-size: .88rem; }
  }

  /* ── Blog strip (inline article links) ─────────────────────────────────────── */
  .hp-blog-strip {
    max-width: 900px; margin: 0 auto;
    padding: 1.2rem 1.5rem .5rem;
  }
  .hp-blog-list { display: flex; flex-direction: column; gap: .5rem; }
  .hp-blog-row {
    display: flex; align-items: baseline; gap: .6rem;
    text-decoration: none; color: #182033;
    padding: .55rem .8rem;
    border-radius: 0;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(72,115,196,.08);
    transition: background .15s, box-shadow .15s;
  }
  .hp-blog-row:hover {
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 16px rgba(37,60,120,.08);
  }
  .hp-blog-tag { font-size: .78rem; color: #7c3aed; font-weight: 700; letter-spacing: .02em; }
  .hp-blog-title { font-size: .95rem; font-weight: 600; }
  .hp-blog-excerpt {
    font-size: .8rem; color: #5f6b85; margin-left: auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  }
  @media (max-width: 600px) {
    .hp-blog-row { flex-wrap: wrap; gap: .3rem; }
    .hp-blog-excerpt { display: none; }
  }

  /* ── Video embed (responsive 16:9) ────────────────────────────────────────── */
  .hp-video-wrap {
    position: relative; width: 100%; max-width: 640px; margin: 0 auto;
    aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden;
    box-shadow: 0 12px 36px rgba(37,60,120,.12);
  }
  .hp-video-wrap iframe,
  .hp-video-wrap lite-youtube {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }

  /* ── Section divider ────────────────────────────────────────────────────────── */
  .hp-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(72,115,196,.15), transparent);
    margin: 0;
  }

  /* ── Informační sekce ───────────────────────────────────────────────────────── */
  .hp-section {
    max-width: 900px; margin: 0 auto;
    padding: 3.5rem 1.5rem;
  }
  .hp-section h2 {
    font-size: clamp(1.3rem, 2.8vw, 1.7rem);
    color: #182033;
    margin-bottom: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .hp-section ul, .hp-section ol {
    padding-left: 1.4rem; color: #33405d;
    line-height: 2.1; font-size: 1rem;
  }
  .hp-section li { margin-bottom: .15rem; }
  .hp-views-note {
    margin-top: 1.5rem;
    background: rgba(79,143,232,.06);
    border-left: 3px solid rgba(79,143,232,.3);
    padding: 1rem 1.2rem;
    border-radius: 0;
    font-size: .9rem; color: #33405d; line-height: 1.75;
  }

  /* ── Section header s "Více →" odkazem ─────────────────────────────────────── */
  .hp-section-hd {
    display: flex; align-items: baseline;
    justify-content: space-between; margin-bottom: 1rem;
  }
  .hp-section-hd h2 { margin-bottom: 0; }
  .hp-more-link {
    font-size: .85rem; font-weight: 600;
    color: #2e6fd0; text-decoration: none;
    transition: color .15s;
  }
  .hp-more-link:hover { color: #4f8fe8; text-decoration: underline; }

  /* ── Patička / disclaimer ───────────────────────────────────────────────────── */
  .hp-footer {
    border-top: 1px solid rgba(72,115,196,.1);
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
    font-size: .82rem; color: #5f6b85; line-height: 2;
    max-width: 700px; margin: 0 auto;
  }
  .hp-footer a { color: #5f6b85; text-decoration: underline; text-decoration-color: rgba(79,143,232,.3); }
  .hp-footer a:hover { color: #2e6fd0; }
  .hp-footer .hp-author {
    margin-top: .75rem; font-size: .78rem; color: #8a95ad;
  }

  /* ── Gallery (Jak to vypadá) ────────────────────────────────────────────────── */
  .hp-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem; margin-top: 1rem;
  }
  @media (max-width: 480px) {
    .hp-gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  }
  .hp-thumb {
    position: relative;
    border-radius: 0; overflow: hidden;
    cursor: zoom-in; display: block;
    box-shadow: 0 4px 16px rgba(37,60,120,.10);
    transition: transform .18s ease, box-shadow .18s ease;
    background: #0d0d1a;
  }
  .hp-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,60,120,.18);
  }
  .hp-thumb img {
    width: 100%; height: 150px; display: block;
    object-fit: cover; object-position: center top;
    transition: opacity .18s, transform .3s;
  }
  .hp-thumb:hover img { opacity: .92; transform: scale(1.03); }
  .hp-gallery-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1rem;
    font-size: .85rem; font-weight: 600;
    color: #2e6fd0; text-decoration: none;
    transition: gap .15s;
  }
  .hp-gallery-more:hover { gap: 8px; }

  /* ── Lightbox (dialog) ──────────────────────────────────────────────────────── */
  #hp-lb {
    padding: 0; border: none; background: transparent;
    max-width: 95vw; max-height: 95dvh;
    border-radius: 0; overflow: visible;
    margin: auto;
  }
  #hp-lb::backdrop { background: rgba(6,6,18,.92); cursor: zoom-out; }
  #hp-lb-img {
    display: block; max-width: 90vw; max-height: 84dvh;
    width: auto; height: auto; border-radius: 0;
    box-shadow: 0 8px 48px rgba(0,0,0,.5);
  }
  #hp-lb-caption {
    color: rgba(255,255,255,.7); font-size: .85rem; text-align: center;
    margin-top: .8rem; max-width: 600px;
  }
  #hp-lb-close {
    position: fixed; top: 1rem; right: 1rem;
    background: rgba(255,255,255,.1); color: #fff;
    border: none; border-radius: 50%;
    width: 2.4rem; height: 2.4rem; font-size: 1.1rem;
    cursor: pointer; line-height: 1; z-index: 10;
    transition: background .15s;
    backdrop-filter: blur(8px);
  }
  #hp-lb-close:hover { background: rgba(255,255,255,.22); }
  .hp-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.1); color: #fff;
    border: none; border-radius: 50%;
    width: 2.8rem; height: 2.8rem; font-size: 1.4rem;
    cursor: pointer; z-index: 10;
    transition: background .15s;
    backdrop-filter: blur(8px);
  }
  .hp-lb-nav:hover  { background: rgba(255,255,255,.22); }
  .hp-lb-nav:disabled { opacity: .15; cursor: default; }
  #hp-lb-prev { left: .8rem; }
  #hp-lb-next { right: .8rem; }

  /* ── Kolektivní mapy ───────────────────────────────────────────────────────── */
  .hp-coll-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 680px) {
    .hp-coll-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  }
  .hp-coll-card {
    position: relative;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(72,115,196,.10);
    border-radius: 0;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 6px 24px rgba(37,60,120,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; gap: .4rem;
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-coll-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(37,60,120,.14);
  }
  .hp-coll-card-title { font-size: 1rem; font-weight: 700; color: #182033; }
  .hp-coll-card-desc { font-size: .85rem; color: #5f6b85; line-height: 1.55; flex: 1; }
  .hp-coll-card-meta { font-size: .78rem; color: #8a95ad; display: flex; gap: .6rem; align-items: center; }
  .hp-coll-card-badge {
    display: inline-block; padding: .2rem .6rem; border-radius: 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  }
  .hp-coll-badge-join { background: rgba(251,191,36,.15); color: #92400e; }
  .hp-coll-badge-done { background: rgba(22,163,74,.1); color: #065f46; }

  /* ── Článkové karty s thumbnaily (tag-filtrované) ─────────────────────────── */
  .hp-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 680px) {
    .hp-articles-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  }
  .hp-art-card {
    position: relative;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(72,115,196,.10);
    border-radius: 0;
    box-shadow: 0 8px 28px rgba(37,60,120,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden; text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-art-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(37,60,120,.14);
  }
  .hp-art-card-img {
    width: 100%; height: 160px; object-fit: cover; display: block;
    background: linear-gradient(180deg, #f0f4ff 0%, #e8eef9 100%);
  }
  .hp-art-card-body { padding: 1rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
  .hp-art-card-date { font-size: .72rem; color: #8a95ad; margin-bottom: .35rem; }
  .hp-art-card-title {
    font-size: 1rem; font-weight: 700; color: #182033;
    margin-bottom: .4rem; line-height: 1.35;
  }
  .hp-art-card-excerpt {
    font-size: .85rem; color: #5f6b85; line-height: 1.6; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-art-card-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .82rem; font-weight: 700; color: #2e6fd0;
    margin-top: .6rem;
    transition: gap .15s;
  }
  .hp-art-card:hover .hp-art-card-link { gap: 8px; }

  /* ── Zeď — grid karet ───────────────────────────────────────────────────────── */
  .hp-wall-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 580px) {
    .hp-wall-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  }
  .hp-wall-card {
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(72,115,196,.10);
    border-radius: 0;
    padding: 1rem 1.1rem;
    box-shadow: 0 4px 18px rgba(37,60,120,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; gap: .35rem;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .hp-wall-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,60,120,.12);
  }
  .hp-wall-card.admin-card {
    background: linear-gradient(135deg, #16162e 0%, #2a1f5c 100%);
    border-color: rgba(139,92,246,.15);
  }
  .hp-wall-card-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
  .hp-wall-card-name { font-size: .82rem; font-weight: 700; color: #182033; }
  .admin-card .hp-wall-card-name { color: #c4b5fd; }
  .hp-wall-card-date { font-size: .72rem; color: #8a95ad; margin-left: auto; }
  .admin-card .hp-wall-card-date { color: rgba(255,255,255,.3); }
  .hp-wall-card-msg { font-size: .9rem; color: #33405d; line-height: 1.6; word-break: break-word; }
  .admin-card .hp-wall-card-msg { color: #ede9fe; }
  .hp-wall-card-img { margin-top: .4rem; }
  .hp-wall-card-img a { display: block; }
  .hp-wall-card-img img {
    width: 100%; max-height: 120px; object-fit: cover;
    border-radius: 0; display: block;
  }