/* ODDCO — portfolio pages (Work, 2D Animation, Character Design, Comics & Manga)
   Loaded together with the landing page's style.css, so these pages share the landing page's
   navbar, footer, WhatsApp button, fonts and dark colour scheme.
   The scattered tile layout is the same as before: CSS columns, every tile keeps its own artwork
   proportions. Only colours / type were aligned with the landing page. */

body.pf { background: var(--darker); color: var(--light); }
body.pf .navbar { background: linear-gradient(to bottom, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.3) 65%, rgba(10, 10, 10, 0) 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-bottom: none; padding: 0.9rem 5%; }
body.pf .navbar .logo, body.pf .navbar .nav-links a { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
body.pf .nav-links a.is-current { color: var(--primary); }

/* ── Page header (same centred style as the landing page's section headers) ── */
.pf-top { padding: 9rem 5% 2.5rem; text-align: center; background: var(--darker); position: relative; overflow: hidden; }
.pf-top::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 77, 90, 0.12) 0%, transparent 70%); pointer-events: none; }
.pf-top > * { position: relative; }
.pf-crumbs { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray); }
.pf-crumbs a { color: var(--gray); text-decoration: none; transition: color 0.3s; }
.pf-crumbs a:hover { color: var(--primary); }
.pf-crumbs [aria-current] { color: var(--primary); }
.pf-top h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); text-transform: uppercase; line-height: 1.05; margin-bottom: 1rem; }
.pf-top h1 em { font-style: normal; color: var(--primary); }
.pf-top p { color: var(--gray); font-size: 1.1rem; max-width: 40rem; margin: 0 auto; line-height: 1.7; }
.pf-count { font-weight: 600; color: var(--light); }

/* ── Category filters (same pill style as the landing page buttons) ── */
.pf-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; padding: 1.5rem 5% 2.5rem; background: var(--darker); }
.pf-filters a, .pf-filters button { padding: 0.625rem 1.5rem; border-radius: 50px; border: 2px solid rgba(255, 255, 255, 0.15); background: transparent; color: var(--gray); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; text-decoration: none; transition: all 0.3s ease; }
.pf-filters a:hover, .pf-filters button:hover { border-color: var(--primary); color: var(--light); }
.pf-filters a.active, .pf-filters button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-filters .count { opacity: 0.7; margin-left: 0.4rem; }

/* ── Scattered projects: unchanged layout ── */
.masonry { columns: 3; column-gap: clamp(1rem, 2vw, 2rem); padding: 0 5% 6rem; background: var(--darker); }
.masonry .tile { break-inside: avoid; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.masonry .tile.is-out { display: none; }

.tile { position: relative; display: block; color: var(--light); text-decoration: none; }
.tile-media { position: relative; overflow: hidden; background: var(--dark); border-radius: clamp(0.5rem, 1vw, 1rem); border: 1px solid rgba(255, 255, 255, 0.06); }
.tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.tile:hover .tile-media img { transform: scale(1.05); }
.tile-cap { display: grid; gap: 0.375rem; padding-top: 0.875rem; }
.tile-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: 0; line-height: 1.2; }
.tile-title small { display: block; font-family: 'Poppins', sans-serif; font-weight: 400; color: var(--gray); font-size: 0.8em; margin-top: 2px; }
.tile .label { color: var(--primary); text-transform: uppercase; font-size: 0.78rem; font-weight: 600; letter-spacing: 1.5px; }
.tile .label::before { content: '['; margin-right: 0.2em; }
.tile .label::after { content: ']'; margin-left: 0.2em; }
.tile-play { position: absolute; left: 0.75rem; bottom: 0.75rem; background: var(--primary); color: #fff; padding: 0.35rem 0.8rem; border-radius: 99px; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; }

/* ── Call to action (landing page contact styling) ── */
.pf-cta { padding: 5rem 5%; text-align: center; background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pf-cta h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); text-transform: uppercase; margin-bottom: 1.5rem; }

/* ── Responsive (same column steps as before) ── */
@media (max-width: 1000px) { .masonry { columns: 2; } }
@media (max-width: 680px) {
    .masonry { columns: 1; }
    .pf-top { padding-top: 7.5rem; }
    .pf-filters a, .pf-filters button { padding: 0.5rem 1rem; font-size: 0.75rem; }
}
@media (orientation: landscape) and (max-width: 1000px) { .masonry { columns: 3; } }
@media (orientation: landscape) and (max-height: 600px) { .pf-top { padding-top: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { .tile-media img { transition: none; } }

/* Category name under each project is not shown on the portfolio pages */
body.pf .tile .label { display: none; }
.tile-cap { padding-top: 0.75rem; }