/* ============================================================
   Page layout classes on top of nocturne.css.
   Breakpoints: 900px (tablet), 640px (mobile).
   ============================================================ */

html { scroll-behavior: smooth; }

.page { max-width: 1180px; margin: 0 auto; }

/* — navigation — */
.site-nav { padding: 18px 56px; flex-wrap: wrap; }
.nav-back {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: inherit; font-size: 14px; margin-right: auto;
}
.nav-back:hover { color: var(--color-accent); }

/* — home hero — */
.hero { display: flex; gap: 56px; align-items: center; padding: 64px 56px 48px; }
.hero-content { flex: 1; min-width: 0; }
.hero-kicker { color: var(--color-accent); margin-bottom: 14px; }
.hero h1 { max-width: 640px; text-wrap: balance; }
.hero-tagline { max-width: 540px; font-size: 16px; margin: 14px 0 24px; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-actions .btn { text-decoration: none; }
.hero-socials { display: inline-flex; gap: 14px; margin-left: 12px; font-size: 20px; }
.hero-socials a { color: var(--color-neutral-400); }
.hero-socials a:hover { color: var(--color-accent); }
.hero-photo {
    width: 190px; height: 190px; object-fit: cover;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); flex: none;
}

/* — skills strip — */
.skills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 56px 40px; }

/* — generic section — */
.section { padding: 8px 56px 48px; scroll-margin-top: 24px; }
.section-kicker { color: var(--color-accent); margin-bottom: 6px; }

/* — projects grid (column count set per page via --project-cols) — */
.projects-grid { display: grid; grid-template-columns: repeat(var(--project-cols, 3), 1fr); gap: 24px; }

/* — work page: header, filters, grid — */
.work-header { padding: 56px 56px 28px; }
.work-header h1 { max-width: 640px; text-wrap: balance; }
.work-header p { max-width: 560px; font-size: 16px; margin: 14px 0 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 56px 28px; }
.filter-btn {
    font: 500 13px var(--font-body), sans-serif;
    padding: 7px 15px; border-radius: 999px; cursor: pointer;
    transition: all .15s;
    background: transparent; color: var(--color-neutral-300);
    border: 1px solid var(--color-divider);
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-btn.active {
    background: var(--color-accent); color: #161826; border-color: var(--color-accent);
}
.work-section { padding: 0 56px 56px; }
/* Work cards use a slightly taller 16:10 media area. */
.work-section .card-media { aspect-ratio: 16/10; }
.work-footer { align-items: center; }
.work-footer .footer-socials { display: inline-flex; gap: 16px; font-size: 19px; }

/* — project card — */
.project-card { padding: 0; overflow: hidden; gap: 0; }
.card-media { aspect-ratio: 16/9; background: var(--color-neutral-900); position: relative; }
.card-media > img { width: 100%; height: 100%; object-fit: cover; }
.card-media video.landscape { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-wrap { position: absolute; inset: 0; display: flex; justify-content: center; }
.portrait-crop { height: 100%; aspect-ratio: 280/720; position: relative; overflow: hidden; }
.portrait-crop video {
    position: absolute; height: 100%; left: 50%; top: 0;
    transform: translateX(-50%); max-width: none;
}
.youtube-embed { position: absolute; inset: 0; }
.youtube-embed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play-hint {
    position: absolute; right: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    background: rgba(22, 24, 38, .8); color: var(--color-neutral-300);
    padding: 3px 8px; border-radius: 4px;
}
.play-hint .tap { display: none; }
@media (hover: none) {
    .play-hint .hover { display: none; }
    .play-hint .tap { display: inline; }
}
.card-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.card-footer { margin-top: 6px; justify-content: space-between; }
.card-footer a { font-size: 12px; }

/* — fading bottom rule (Nocturne signature) — */
.row-rule {
    background: linear-gradient(to right,
        transparent, var(--color-divider) 48px,
        var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — experience / education rows — */
.timeline-row { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 16px 0; }
.timeline-period { font-size: 13px; }
.timeline-role { margin-bottom: 2px; }
.timeline-org { color: var(--color-accent-300); font-size: 13px; }
.timeline-desc { font-size: 13px; margin: 6px 0 0; max-width: 640px; }

/* — about / contact — */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 8px 56px 56px; scroll-margin-top: 24px; }
.about-grid p { font-size: 14px; }
.contact-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.contact-links a { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }

/* — footer — */
.site-footer {
    display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
    padding: 24px 56px 32px; font-size: 13px;
    background: linear-gradient(to right,
        transparent, var(--color-divider) 48px,
        var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
}
.site-footer a { text-decoration: none; }

/* ============================================================
   Project page (ProjectPageLayout template)
   ============================================================ */

.pp-header { display: flex; gap: 56px; padding: 48px 56px; align-items: center; }
.pp-hero-video {
    flex: none; width: 340px; background: var(--color-neutral-900);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    display: flex; justify-content: center; padding: 20px;
}
.pp-phone { height: 560px; aspect-ratio: 280/720; position: relative; overflow: hidden; border-radius: var(--radius-md); }
.pp-phone video {
    position: absolute; height: 100%; left: 50%; top: 0;
    transform: translateX(-50%); max-width: none;
}
.pp-hero-image {
    flex: none; width: 480px; max-width: 100%; aspect-ratio: 16/10; object-fit: cover;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.pp-head-content { flex: 1; min-width: 0; }
.pp-head-content h1 { margin: 16px 0 12px; }
.pp-summary { font-size: 16px; max-width: 520px; }
.pp-facts { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; font-size: 14px; }
.pp-facts > span { display: inline-flex; gap: 10px; align-items: center; }
.pp-facts i { color: var(--color-accent); }

.pp-section { padding: 8px 56px 48px; }
.pp-section.narrow { max-width: 900px; }
.pp-section p.lead { font-size: 15px; }

.pp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-grid-2 .card-body { font-size: 13.5px; }
.pp-usage { font-size: 13.5px; margin: 0; color: var(--color-neutral-300); }
.pp-usage strong { font-weight: 500; color: var(--color-accent-300); }

.next-step { display: flex; gap: 16px; padding: 16px 0; }
.next-step > i { color: var(--color-accent); font-size: 22px; flex: none; margin-top: 2px; }
.next-step h4 { margin-bottom: 4px; }
.next-step p { font-size: 14px; margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
    .site-nav { padding: 16px 28px; }
    .hero { padding: 48px 28px 36px; gap: 32px; }
    .skills { padding: 0 28px 32px; }
    .section, .pp-section { padding: 8px 28px 40px; }
    .about-grid { padding: 8px 28px 48px; gap: 32px; }
    .site-footer { padding: 20px 28px 28px; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-header { padding: 36px 28px; gap: 32px; }
    .work-header { padding: 44px 28px 24px; }
    .filters { padding: 0 28px 24px; }
    .work-section { padding: 0 28px 44px; }
}

@media (max-width: 640px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }

    .site-nav { padding: 14px 18px; gap: 12px 16px; }
    .hero { flex-direction: column-reverse; align-items: stretch; padding: 32px 18px 24px; gap: 24px; }
    .hero-photo { width: 150px; height: 150px; margin: 0 auto; }
    .skills { padding: 0 18px 28px; }
    .section, .pp-section { padding: 8px 18px 36px; }
    .projects-grid { grid-template-columns: 1fr; }
    .timeline-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
    .about-grid { grid-template-columns: 1fr; padding: 8px 18px 44px; }
    .site-footer { padding: 18px 18px 24px; }

    .work-header { padding: 28px 18px 20px; }
    .filters { padding: 0 18px 20px; }
    .work-section { padding: 0 18px 36px; }

    .pp-header { flex-direction: column; align-items: stretch; padding: 24px 18px 28px; gap: 28px; }
    .pp-hero-video { width: 100%; max-width: 340px; margin: 0 auto; padding: 14px; }
    .pp-phone { height: auto; width: min(280px, 100%); }
    .pp-hero-image { width: 100%; }
    .pp-grid-2 { grid-template-columns: 1fr; }
}