/*
Theme Name: PTK Materials Theme
Theme URI: https://example.com/ptk-materials-theme
Author: PTK
Author URI: https://example.com
Description: Block theme for a Pinterest-like materials site with blog features.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ptk-materials-theme
Tags: block-patterns, full-site-editing, blog, grid-layout
*/

:root {
  --ptk-bg: #efefef;
  --ptk-surface: #fdfcf8;
  --ptk-ink: #111111;
  --ptk-accent: #121212;
  --ptk-accent-soft: #ffcb57;
  --ptk-muted: #5f5d58;
  --ptk-line: #d9d4c9;
  --ptk-logo-width: 150px;
  --ptk-logo-height: 52px;
  --ptk-bg-base: #f8f7f1;
  --ptk-bg-mid: #8fdbc7;
  --ptk-bg-low: #d8eef7;
}

body {
  background: linear-gradient(180deg, #efefef 0%, #ecebe8 100%);
  color: var(--ptk-ink);
}

.wp-site-blocks {
  min-height: 100vh;
}

.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--ptk-surface) 90%, transparent);
  border-bottom: 1px solid var(--ptk-line);
}

.site-header-inner {
  position: relative;
}

.site-header-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px dashed #bbb4a7;
}

.brand-mark {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

.brand-wrap {
  gap: 0.2rem;
}

.site-logo-custom img {
  width: var(--ptk-logo-width);
  max-height: var(--ptk-logo-height);
  object-fit: contain;
}

.header-date-chip {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.62rem;
  border: 1px solid var(--ptk-line);
  border-radius: 999px;
}

.hero-copy {
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  color: var(--ptk-muted);
  max-width: 32ch;
}

.hero-layout {
  position: relative;
  border-top: 1px solid var(--ptk-line);
  border-bottom: 1px solid var(--ptk-line);
}

.hero-layout::before {
  content: "";
  position: absolute;
  right: 16%;
  top: 18px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid #cfc8bb;
  pointer-events: none;
}

.hero-layout::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 58px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 40%, rgb(255 185 64 / 52%) 0%, transparent 65%);
  pointer-events: none;
}

.hero-subline {
  color: var(--ptk-muted);
  font-size: 0.95rem;
}

.section-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ptk-muted);
}

.spotlight-orbit {
  position: relative;
  border: 1px solid var(--ptk-line);
  border-radius: 320px;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  background: color-mix(in srgb, #fff, transparent 22%);
}

.spotlight-label {
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.spotlight-card {
  border: 1px solid var(--ptk-line);
  border-radius: 18px;
  padding: 0.8rem;
  background: #fffdfa;
}

.spotlight-card .wp-block-post-date,
.spotlight-card .wp-block-post-terms {
  font-size: 0.8rem;
  color: var(--ptk-muted);
}

.pin-grid {
  column-count: 4;
  column-gap: 1.2rem;
}

.pin-grid > li {
  break-inside: avoid;
  margin: 0 0 1.2rem;
  width: 100%;
}

.pin-card {
  border: 1px solid var(--ptk-line);
  border-radius: 16px;
  overflow: clip;
  background: var(--ptk-surface);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pin-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 24px -22px rgb(17 17 17 / 50%);
}

.blog-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 20px -18px rgb(17 17 17 / 55%);
}

.pin-card .wp-block-post-featured-image img {
  border-bottom: 1px solid var(--ptk-line);
}

.pin-card .wp-block-post-title {
  padding: 0.2rem 1rem 0;
}

.pin-card .wp-block-post-excerpt,
.pin-card .wp-block-post-date,
.pin-card .wp-block-post-terms {
  padding: 0 1rem;
}

.pin-card .wp-block-post-excerpt {
  color: var(--ptk-muted);
}

.pin-card .wp-block-post-date {
  font-size: 0.82rem;
}

.pin-card .wp-block-read-more {
  padding: 0 1rem 1rem;
  display: inline-block;
  color: var(--ptk-accent);
  font-weight: 600;
}

/* Design Layer: Desktop left sidebar */
.catalog-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.facet-sidebar {
  position: sticky;
  top: 92px;
  border-right: 1px solid var(--ptk-line);
  background: transparent;
  padding: 0.2rem 1rem 0.8rem 0;
}

.facet-section {
  padding: 0.2rem 0 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid #ddd8cf;
}

.facet-section:last-child {
  border-bottom: 0;
}

.facet-section h4 {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-chip-wrap {
  display: grid;
  gap: 0.42rem;
}

.color-swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20px, 20px));
  gap: 0.5rem;
}

.catalog-content {
  min-width: 0;
}

.catalog-more-link .wp-block-button__link {
  border: 1px solid #111;
  border-radius: 999px;
  background: #fffefb;
  color: #111;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.56rem 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.catalog-more-link .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #111;
  background: #fff2a8;
}

.material-filter-bar {
  margin: 0.5rem 0 0.8rem;
}

.filter-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.filter-chip {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ptk-ink);
  border-radius: 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: left;
  padding: 0.25rem 0.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-chip:hover {
  color: #000;
  transform: translateX(2px);
}

.filter-chip.is-active {
  background: transparent;
  border-color: transparent;
  color: #000;
  font-weight: 700;
}

.color-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #b8b3a8;
  background: var(--swatch, #d3cdc2);
  transform: none;
}

.color-swatch:hover {
  transform: scale(1.08);
}

.color-swatch.is-active {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-color: #fff;
}

.material-card .wp-block-post-terms {
  font-size: 0.78rem;
  color: var(--ptk-muted);
}

.material-card.is-hidden {
  display: none;
}

.material-download-panel {
  background:
    radial-gradient(circle at 10% 8%, rgb(255 193 82 / 33%) 0%, transparent 26%),
    linear-gradient(160deg, #fff9ef 0%, #fffdf8 90%);
}

.material-download-btn {
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.material-license-note {
  margin: 0;
  color: var(--ptk-muted);
  font-size: 0.92rem;
}

@media (max-width: 1200px) {
  .catalog-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .pin-grid {
    column-count: 3;
  }
}

@media (max-width: 860px) {
  .hero-layout::before,
  .hero-layout::after {
    display: none;
  }

  .spotlight-orbit {
    border-radius: 30px;
  }

  .catalog-shell {
    display: block;
  }

  .facet-sidebar {
    position: static;
    border-right: 0;
    background: #ebebe9;
    border: 1px solid var(--ptk-line);
    border-radius: 14px;
    padding: 0.8rem;
    margin-bottom: 1rem;
  }

  .pin-grid {
    column-count: 2;
  }
}

@media (max-width: 540px) {
  .pin-grid {
    column-count: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Playful Accent Layer (balanced) */
:root {
  --ptk-bg: #f7f7f1;
  --ptk-surface: #fffefb;
  --ptk-accent-soft: #fff2a8;
  --ptk-line-soft: #9e9a91;
}

body {
  background: linear-gradient(180deg, var(--ptk-bg-base) 0%, #f2f1ec 100%);
}

.wp-site-blocks {
  background:
    linear-gradient(180deg, var(--ptk-bg-mid) 0 380px, var(--ptk-bg-base) 380px 1120px, var(--ptk-bg-low) 1120px 100%);
}

.site-header-wrap {
  background: color-mix(in srgb, var(--ptk-bg-mid) 78%, #ffffff);
  border-bottom-width: 2px;
}

.header-date-chip {
  background: #fff9c8;
  border: 1px solid var(--ptk-line);
  font-weight: 700;
}

.hero-layout {
  border-width: 2px;
  border-radius: 24px;
  background: color-mix(in srgb, #8fdbc7 58%, #ffffff);
}

.hero-layout::before,
.hero-layout::after {
  display: none;
}

.hero-copy {
  color: #203731;
  font-weight: 500;
}

.spotlight-orbit {
  border-width: 2px;
  border-radius: 20px;
  background: #fff6d9;
}

.spotlight-card {
  border-width: 2px;
  border-radius: 18px;
}

.hero-banner-panel {
  border: 1px solid #9eb6b0;
  border-radius: 14px;
  background: #f9f9f4;
  padding: 0.8rem;
}

.hero-banner-slider {
  border: 1px solid var(--ptk-line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
}

.hero-banner-slider.is-empty {
  padding: 1rem;
  color: var(--ptk-muted);
  font-size: 0.9rem;
}

.hero-banner-track {
  position: relative;
}

.hero-banner-slide {
  display: none;
}

.hero-banner-slide.is-active {
  display: block;
}

.hero-banner-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.hero-banner-controls {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.42rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  border: 1px solid var(--ptk-line-soft);
}

.hero-banner-nav,
.hero-banner-dot {
  appearance: none;
  border: 1px solid var(--ptk-line-soft);
  background: #fff;
  color: #444;
  cursor: pointer;
}

.hero-banner-nav {
  border-radius: 999px;
  width: 1.7rem;
  height: 1.7rem;
  line-height: 1;
}

.hero-banner-dots {
  display: flex;
  gap: 0.3rem;
}

.hero-banner-dot {
  border-radius: 999px;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border-color: #666;
}

.hero-banner-dot.is-active {
  width: 1rem;
  background: #666;
  border-color: #666;
}

.catalog-shell {
  border: 1px solid #c6c2b7;
  border-radius: 20px;
  background: #fffefb;
  padding: 0.9rem;
}

.facet-sidebar {
  border-right: 1px dashed #8e8a80;
}

.filter-chip.is-active {
  color: #333;
  background: #fff2a8;
  border: 1px solid var(--ptk-line-soft);
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
}

.color-swatch {
  border: 1px solid #7a766e;
}

.color-swatch.is-active {
  outline: 2px solid #6b6860;
}

.pin-card {
  border-width: 1px;
  border-color: #bdb9af;
  box-shadow: 0 6px 12px -10px rgb(17 17 17 / 45%);
}

.pin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 16px -14px rgb(17 17 17 / 55%);
}

.pin-card .wp-block-post-read-more,
.pin-card .wp-block-read-more {
  border: 1px solid #8d897f;
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  margin: 0.4rem 1rem 1rem;
  background: #fff2a8;
  font-weight: 700;
}

.blog-card {
  border-width: 1px;
  border-color: #bdb9af;
  box-shadow: 0 6px 12px -12px rgb(17 17 17 / 50%);
}

.blog-card:hover {
  box-shadow: 0 10px 16px -14px rgb(17 17 17 / 55%);
}

@media (max-width: 860px) {
  .wp-site-blocks {
    background: #f8f7f1;
  }

  .facet-sidebar {
    border-right: 0;
    background: #fff8da;
    border: 1px solid var(--ptk-line);
  }
}

/* Borderless pass */
.site-header-wrap,
.site-header-inner::after,
.header-date-chip,
.hero-layout,
.hero-banner-panel,
.hero-banner-slider,
.hero-banner-controls,
.hero-banner-nav,
.hero-banner-dot,
.catalog-shell,
.facet-sidebar,
.facet-section,
.catalog-more-link .wp-block-button__link,
.filter-chip.is-active,
.color-swatch,
.pin-card,
.pin-card .wp-block-post-read-more,
.pin-card .wp-block-read-more,
.blog-card,
.material-download-panel,
.spotlight-orbit,
.spotlight-card {
  border: 0 !important;
  outline: 0 !important;
}

.site-header-wrap {
  box-shadow: none !important;
}

.hero-layout {
  box-shadow: none !important;
}

.wp-block-search__inside-wrapper {
  border: 0 !important;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 28px -16px rgb(17 17 17 / 38%);
}

.wp-block-search__button {
  border: 0 !important;
  box-shadow: none !important;
}

.catalog-shell,
.hero-banner-panel,
.spotlight-orbit {
  box-shadow: 0 10px 24px -22px rgb(17 17 17 / 26%);
}