/* ============================================================
   /projects — DARK  ·  09) SEKCE (varianty)
   ------------------------------------------------------------
   Web má 3 sekce, každá lehce jinak, ale všechny Material glass:
     .psx-block--intro  – uvítací panel, neutrální sklo, teal glow
     .psx-block--faces  – Wear OS ciferníky, teal akcent, foto karty
     .psx-block--wp     – WordPress pluginy/design, coral akcent, ikon-dlaždice
   ============================================================ */

body.psx-dark .psx-block {
  max-width: var(--psx-container);
  margin: 0 auto;
  scroll-margin-top: 120px;
}
body.psx-dark .psx-block + .psx-block { margin-top: 64px; }

/* plynulé posouvání na kotvy z chipů */
html:has(body.psx-dark) { scroll-behavior: smooth; }

/* společný „eyebrow" nad nadpisem sekce */
body.psx-dark .psx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.psx-dark .psx-eyebrow--teal {
  color: var(--psx-teal-light);
  background: rgba(31,171,188,0.10);
  border: 1px solid rgba(31,171,188,0.30);
}
body.psx-dark .psx-eyebrow--coral {
  color: #ff9d92;
  background: rgba(252,124,113,0.10);
  border: 1px solid rgba(252,124,113,0.30);
}

/* WordPress "W" (simpleicons, CC0) u eyebrow sekce s pluginy */
body.psx-dark .psx-block--wp .psx-eyebrow::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   SEKCE 1 — INTRO
   ============================================================ */
body.psx-dark .psx-block--intro { position: relative; }

body.psx-dark .psx-intro {
  position: relative;
  overflow: hidden;
  padding: 32px 34px 42px;
  text-align: center;
  border-radius: var(--psx-radius-xl);
  /* jemný teal glow shora zapečený do pozadí (žádný pseudo/z-index) */
  background:
    radial-gradient(55% 50% at 50% -10%, rgba(31,171,188,0.10), rgba(31,171,188,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: var(--psx-hi-teal), var(--psx-shadow);
  -webkit-backdrop-filter: blur(var(--psx-blur));
  backdrop-filter: blur(var(--psx-blur));
}
/* decentní teal→coral gradient okraj (jen intro – spojuje obě barvy sekcí) */
body.psx-dark .psx-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(86,205,218,0.55) 0%,
    rgba(86,205,218,0.10) 45%,
    rgba(255,140,128,0.12) 55%,
    rgba(255,140,128,0.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

body.psx-dark .psx-intro .psx-title { margin-bottom: 18px; }
body.psx-dark .psx-intro .psx-lead { margin-bottom: 30px; }

/* rychlé odkazy na sekce */
body.psx-dark .psx-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
body.psx-dark .psx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--psx-text);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease;
}
body.psx-dark .psx-chip span {
  font-size: 11px;
  font-weight: 700;
  color: var(--psx-teal-light);
  letter-spacing: 0.06em;
}
body.psx-dark .psx-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(86,197,210,0.5);
  background: rgba(31,171,188,0.08);
}
/* chipy mířící do coral sekcí (WordPress / Web design) → coral tón */
body.psx-dark .psx-chip[href="#wordpress"] span,
body.psx-dark .psx-chip[href="#webdesign"] span { color: #ff9d92; }
body.psx-dark .psx-chip[href="#wordpress"]:hover,
body.psx-dark .psx-chip[href="#webdesign"]:hover {
  border-color: rgba(252,124,113,0.5);
  background: rgba(252,124,113,0.08);
}

/* ============================================================
   SEKCE 2 — WEAR OS CIFERNÍKY  (foto karty, teal)
   – většina stylu je v 05-cards.css; tady jen jemné doladění
   ============================================================ */
body.psx-dark .psx-block--faces .psx-card:hover,
body.psx-dark .psx-block--tiles .psx-card:hover {
  border-color: rgba(86,197,210,0.5);
}

/* ============================================================
   SEKCE 2b — WEAR OS TILES  (foto karty, teal, vycentrované)
   – po 3 v řádku, ale při 1–2 kartách vycentrovat
   ============================================================ */
body.psx-dark .psx-grid--tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
body.psx-dark .psx-grid--tiles > .psx-card {
  flex: 0 1 320px;
  max-width: 340px;
}
@media (max-width: 380px) {
  body.psx-dark .psx-grid--tiles > .psx-card { flex-basis: 100%; }
}

/* ============================================================
   SEKCE 3 — WORDPRESS PLUGINY  (ikon-dlaždice, coral, 3-up)
   ============================================================ */
body.psx-dark .psx-grid--wp {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ============================================================
   SEKCE 4 — WEB DESIGN  (širší dlaždice, větší rádius = jiný charakter)
   ============================================================ */
body.psx-dark .psx-grid--web {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
body.psx-dark .psx-block--web .psx-tile {
  padding: 30px 28px;
  border-radius: var(--psx-radius-lg);
}
body.psx-dark .psx-block--web .psx-tile__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

body.psx-dark .psx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 26px;
  border-radius: var(--psx-radius-md);          /* menší rádius = jiný charakter */
  overflow: hidden;
  background: var(--psx-glass);
  border: 1px solid var(--psx-border-coral);
  box-shadow: var(--psx-hi-coral), var(--psx-shadow-soft);
  -webkit-backdrop-filter: blur(var(--psx-blur));
  backdrop-filter: blur(var(--psx-blur));
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
/* Material „state layer" – tonální coral podklad při najetí (žádný lift) */
body.psx-dark .psx-tile:hover {
  border-color: rgba(252,124,113,0.42);
  box-shadow: var(--psx-hi-coral), 0 22px 48px rgba(0,0,0,0.5);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(252,124,113,0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
}

/* ikon dlaždice */
body.psx-dark .psx-tile__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  flex: 0 0 auto;
  background: rgba(252,124,113,0.12);
  border: 1px solid rgba(252,124,113,0.28);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
/* výchozí ikona = „plugin" (puzzle) */
body.psx-dark .psx-tile__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9d92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v3a2 2 0 1 0 4 0V3h4a1 1 0 0 1 1 1v4h-3a2 2 0 1 0 0 4h3v4a1 1 0 0 1-1 1h-4v-3a2 2 0 1 0-4 0v3H6a1 1 0 0 1-1-1v-4H3a2 2 0 1 1 0-4h2V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
/* varianta „design" (paleta) */
body.psx-dark .psx-tile--design .psx-tile__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9d92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.6 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.7-1.6 1.6-1.6H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='7.5' r='1'/%3E%3Ccircle cx='16.5' cy='10.5' r='1'/%3E%3C/svg%3E");
}

body.psx-dark .psx-tile__name {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--psx-heading);
}
body.psx-dark .psx-tile__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--psx-text-soft);
}
/* v této sekci štítky + tlačítka v coral tónu */
body.psx-dark .psx-tile .psx-card__tags li {
  color: #ff9d92;
  background: rgba(252,124,113,0.08);
  border-color: rgba(252,124,113,0.22);
}
body.psx-dark .psx-tile .psx-btn--solid {
  background: linear-gradient(180deg, #ff9d92, var(--psx-coral));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 12px 28px rgba(200,70,60,0.30);
}
body.psx-dark .psx-tile .psx-btn--solid:hover {
  background: linear-gradient(180deg, #ffb0a6, #ff9d92);
}
body.psx-dark .psx-tile .psx-card__links { margin-top: auto; padding-top: 6px; }

@media (max-width: 767px) {
  body.psx-dark .psx-block + .psx-block { margin-top: 44px; }
  body.psx-dark .psx-intro { padding: 34px 18px 30px; border-radius: var(--psx-radius-lg); }
}