/* ─────────────────────────────────────────────────────────────────
   pinterest.css — NightStock Pinterest-inspired theme
   - Warm cream chrome, single saturated red accent, image-first
   - Pin Sans (system fallback), pill-rounded 16px buttons
   - Masonry pin grid
   - Loaded ONLY when ?theme=pinterest or cookie ns_theme=pinterest
   ───────────────────────────────────────────────────────────────── */

:root {
    /* Pinterest Red — single saturated accent */
    --pin-red:        #E60023;
    --pin-red-hover:  #AD081B;
    --pin-red-soft:   #FFE9EC;

    /* Warm cream chrome */
    --pin-cream:      #FDFAF6;   /* page bg */
    --pin-cream-2:    #F6F1EA;   /* card bg, panels */
    --pin-cream-3:    #EFE9E0;   /* hover */

    /* Neutrals */
    --pin-ink:        #111111;
    --pin-text:       #1F1F1F;
    --pin-text-2:     #4A4A4A;
    --pin-text-3:     #767676;
    --pin-line:       #E9E1D6;
    --pin-divider:    #EDE6DA;

    /* Shadows (very subtle — pin grid is shadow-less by default) */
    --pin-shadow-sm:  0 1px 2px rgba(17, 17, 17, 0.04);
    --pin-shadow-md:  0 4px 12px rgba(17, 17, 17, 0.08);
    --pin-shadow-lg:  0 12px 32px rgba(17, 17, 17, 0.12);

    /* Radius */
    --pin-radius-pill:   9999px;
    --pin-radius-card:   16px;
    --pin-radius-input:  24px;
    --pin-radius-btn:    24px;
}

/* ── Reset NightStock dark theme — high specificity so it beats Tailwind utilities ── */
html, html body, body.bg-white, body[class*="bg-"] {
    background: var(--pin-cream) !important;
    background-color: var(--pin-cream) !important;
    color: var(--pin-text) !important;
    font-family: "Pin Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Noto Sans CJK JP", "Yu Gothic", "Meiryo", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* main container area — also cream */
main, main[class*="bg-"], body > main, body > div > main {
    background: var(--pin-cream) !important;
    background-color: var(--pin-cream) !important;
}

/* Global text colour neutralisation */
.text-white {
    color: #ffffff !important;  /* keep white on red/dark buttons */
}
body .text-gray-100, body .text-gray-200, body .text-gray-300, body .text-gray-400 {
    color: var(--pin-text-2) !important;
}
body .text-gray-500, body .text-gray-600, body .text-gray-700, body .text-gray-800, body .text-gray-900 {
    color: var(--pin-text) !important;
}

/* Dark backgrounds → cream (but NOT on red buttons / nav-active) */
body .bg-gray-900:not([class*="bg-red"]),
body .bg-gray-800:not([class*="bg-red"]),
body .bg-slate-900:not([class*="bg-red"]),
body .bg-slate-800:not([class*="bg-red"]) {
    background: var(--pin-cream-2) !important;
    color: var(--pin-text) !important;
}

/* .bg-black on body or large containers → cream; small (buttons) keep below */
body main .bg-black, body section .bg-black {
    background: var(--pin-cream-2) !important;
    color: var(--pin-text) !important;
}

/* Cards (small .bg-white inside main) — stay white pins on cream bg */
body main .bg-white, body section .bg-white, body article.bg-white,
body .image-card, body .ns-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ── Top nav ── */
nav.ns-main-nav, header, .ns-main-nav {
    background: rgba(253, 250, 246, 0.92) !important;
    backdrop-filter: saturate(180%) blur(16px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
    border-bottom: 1px solid var(--pin-divider) !important;
    box-shadow: none !important;
}

/* Logo */
.ns-logo, .ns-logo-wrap, a[href="/"] strong, a[href="/"] span {
    color: var(--pin-red) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Nav buttons / category pills — rounded pill (16px+) */
nav a, nav button {
    border-radius: var(--pin-radius-pill) !important;
}

/* Search bar — large rounded, cream background */
input[type="search"],
input[type="text"][placeholder*="検索"],
input[type="text"][placeholder*="Search"],
#search-container input {
    background: var(--pin-cream-2) !important;
    color: var(--pin-text) !important;
    border: 1px solid transparent !important;
    border-radius: var(--pin-radius-input) !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    transition: background 0.15s, border-color 0.15s !important;
}
input[type="search"]:focus,
input[type="text"][placeholder*="検索"]:focus,
input[type="text"][placeholder*="Search"]:focus,
#search-container input:focus {
    background: #ffffff !important;
    border-color: var(--pin-text) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--pin-text) inset !important;
}

/* ── Buttons ── */
button, .btn, a.btn,
.bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
.bg-purple-500, .bg-purple-600, .bg-purple-700,
.bg-pink-500, .bg-pink-600, .bg-pink-700 {
    border-radius: var(--pin-radius-btn) !important;
}

/* Primary CTA — Pinterest red */
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800,
button[type="submit"],
a.btn-primary, .btn-primary {
    background: var(--pin-red) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--pin-radius-btn) !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
}
.bg-red-500:hover, .bg-red-600:hover, .bg-red-700:hover,
button[type="submit"]:hover,
a.btn-primary:hover, .btn-primary:hover {
    background: var(--pin-red-hover) !important;
}

/* Secondary button — black pill */
.btn-secondary,
.bg-black {
    background: var(--pin-ink) !important;
    color: #ffffff !important;
    border-radius: var(--pin-radius-btn) !important;
    font-weight: 700 !important;
}

/* Tertiary / ghost button — cream */
.bg-gray-100, .bg-gray-200 {
    background: var(--pin-cream-2) !important;
    color: var(--pin-text) !important;
    border-radius: var(--pin-radius-btn) !important;
    font-weight: 700 !important;
}
.bg-gray-100:hover, .bg-gray-200:hover {
    background: var(--pin-cream-3) !important;
}

/* ── Cards / image tiles → Pinterest pin look ── */
.ns-card, .image-card, .card, article.card,
[class*="rounded"][class*="overflow-hidden"][class*="bg-"] {
    background: #ffffff !important;
    border-radius: var(--pin-radius-card) !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.ns-card:hover, .image-card:hover, .card:hover, article.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--pin-shadow-md) !important;
}

/* Re-enable image events (NightStock had pointer-events:none) — pin grid needs hover */
.ns-card img, .image-card img, .card img, article.card img {
    pointer-events: auto !important;
    border-radius: var(--pin-radius-card) !important;
    display: block;
    width: 100%;
    height: auto;
}

/* ─────────────────────────────────────────────────────────────────
   セクション別レイアウト
   ・上部 (今週の人気・新着ピックアップ): a[href*="image.php"] → 5枚並び小カード
   ・下部 (メイングリッド): .columns-* + a[href*="/image/"] → 大型ピン
   ───────────────────────────────────────────────────────────────── */

/* ── 上部: 今週の人気 / 新着ピックアップ → 5枚並びの flex (現状の小カード維持) ── */
div.flex:has(> a[href*="image.php"]),
div[class*="flex"][class*="gap-"]:has(> a[href*="image.php"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    overflow: visible !important;
    max-width: 1200px;
    margin: 0 auto !important;
}
/* 上部の小カード: 5枚で1行 (gap考慮で各 calc((100% - 4*12px) / 5) ≈ 19%) */
a[href*="image.php"][style*="width"] {
    width: calc((100% - 48px) / 5) !important;
    max-width: 220px !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
    flex: 0 0 calc((100% - 48px) / 5) !important;
}
@media (max-width: 768px) {
    a[href*="image.php"][style*="width"] {
        width: calc((100% - 24px) / 3) !important;
        flex-basis: calc((100% - 24px) / 3) !important;
    }
}

/* ── 下部: メインメイングリッド (.columns-*) → 大きなピン (2-4列) ── */
div[class*="columns-"][class*="gap-"] {
    column-count: 2 !important;
    column-gap: 20px !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 16px !important;
}
@media (min-width: 768px)  { div[class*="columns-"][class*="gap-"] { column-count: 4 !important; } }
@media (min-width: 1280px) { div[class*="columns-"][class*="gap-"] { column-count: 5 !important; } }
@media (min-width: 1920px) { div[class*="columns-"][class*="gap-"] { column-count: 6 !important; } }
@media (min-width: 2400px) { div[class*="columns-"][class*="gap-"] { column-count: 7 !important; } }

/* 下部の各ピン: break-inside-avoid 維持、フル幅で columns に流れる */
div[class*="columns-"] > div.break-inside-avoid,
div[class*="columns-"] > .break-inside-avoid {
    margin-bottom: 20px !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* 下部カード: 大きく表示 */
div[class*="columns-"] a[href*="/image/"],
div[class*="columns-"] a[href*="image.php"] {
    display: block !important;
    width: 100% !important;
    border-radius: var(--pin-radius-card) !important;
    overflow: hidden !important;
}
div[class*="columns-"] a[href*="/image/"] img,
div[class*="columns-"] a[href*="image.php"] img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    pointer-events: auto !important;
}

/* ── 上部カードの img: もとの absolute inset 維持 (固定アスペクト3:4で表示) ── */
a[href*="image.php"][style*="width"] img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: auto !important;
}

main > .grid > *, .image-grid > *, .pin-grid > * {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 16px;
    display: block;
}

/* Force inline cards into pin-grid items */
main .grid > div, main .grid > a, main .grid > article {
    width: 100%;
}

/* Cards that had fixed aspect-ratio: reset (pins are intrinsic-height) */
.ns-card[style*="aspect-ratio"], .image-card[style*="aspect-ratio"] {
    aspect-ratio: auto !important;
    height: auto !important;
}

/* ── Headings ── */
h1, h2, h3, h4 {
    color: var(--pin-text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
h1 { font-size: clamp(28px, 5vw, 44px) !important; line-height: 1.1 !important; }
h2 { font-size: clamp(20px, 3vw, 28px) !important; line-height: 1.2 !important; }

/* Section headings (人気・新着 etc.) — left aligned, bold */
.section-title, h2.section-title {
    text-align: left !important;
    padding-left: 16px !important;
    border-left: 4px solid var(--pin-red) !important;
    margin: 32px 0 16px !important;
}

/* ── Links ── */
a {
    color: var(--pin-text) !important;
    transition: color 0.15s !important;
}
a:hover {
    color: var(--pin-red) !important;
}

/* ── Footer ── */
footer {
    background: var(--pin-cream-2) !important;
    border-top: 1px solid var(--pin-divider) !important;
    color: var(--pin-text-2) !important;
}

/* ── Modal / overlay ── */
.modal, .ns-mobile-overlay {
    backdrop-filter: blur(8px) !important;
}
.ns-mobile-panel {
    background: var(--pin-cream) !important;
    box-shadow: var(--pin-shadow-lg) !important;
}

/* ── Tags / chips ── */
.tag, .chip, [class*="tag-"], a.tag {
    background: var(--pin-cream-2) !important;
    color: var(--pin-text) !important;
    border-radius: var(--pin-radius-pill) !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: none !important;
}
.tag:hover, .chip:hover, a.tag:hover {
    background: var(--pin-cream-3) !important;
    color: var(--pin-red) !important;
}

/* Selected / active tag */
.tag.active, .chip.active, [class*="tag-"].active {
    background: var(--pin-ink) !important;
    color: #ffffff !important;
}

/* ── Sticky CTA (Sign up / DL) ── */
.ns-sticky-cta, .sticky-cta {
    position: sticky;
    top: 12px;
    background: var(--pin-red);
    color: #ffffff !important;
    border-radius: var(--pin-radius-btn);
    font-weight: 800;
    padding: 12px 20px;
    box-shadow: var(--pin-shadow-md);
}

/* ── 18禁モード: 既存の赤背景 nav を black accent に変更 ── */
.bg-red-700.border-red-800 {
    background: var(--pin-ink) !important;
    border-color: var(--pin-ink) !important;
}

/* ── NS Logo の画像枚数バッジ: 赤背景に白文字を強制 ── */
.ns-logo-count,
.ns-logo-wrap .ns-logo-count,
a .ns-logo-count,
a:hover .ns-logo-count {
    color: #ffffff !important;
    background: var(--pin-red) !important;
    font-weight: 700 !important;
}

/* ── Misc cleanup: kill heavy gradients/shadows from dark theme ── */
[style*="gradient"][style*="rgba(0,0,0"], [style*="gradient"][style*="rgba(0, 0, 0"] {
    background: transparent !important;
}

/* Ad slot containers — soft cream so they don't dominate */
.ad-slot, .ad-container, [id*="ad-"], [class*="ad-banner"] {
    background: var(--pin-cream-2) !important;
    border-radius: var(--pin-radius-card) !important;
    overflow: hidden;
}

/* Skeleton during image load */
img[loading="lazy"] {
    background: var(--pin-cream-2);
}