/* 
 * BYSTRC-2030: TILE LAYOUT SYSTEM
 * 8 tiles, golden-ratio grid. ZERO magic numbers.
 * Every value references a φ-derived variable from variables.css.
 */

:root {
    --c-arrow-accent: var(--spiral-color-13);       /* From spiral palette (dark grey/olive) */
    --c-arrow-accent-hover: var(--spiral-color-15); /* From spiral palette (very dark grey) */
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--c-ink);
    background-color: #ffffff;
    background-image: url('../img/line-texture.png');
    background-repeat: repeat;
    line-height: var(--lh-base);
    overflow-x: hidden;
    transition: background-color var(--time-slow) var(--ease-golden);
}

/* ═══════════════════════════════════════════════════
   TILE GRID SYSTEM
   ═══════════════════════════════════════════════════ */
.tile-grid {
    display: grid;
    width: 100%;
    min-height: 100vh;
    gap: var(--space-item);
    padding: var(--space-item);
    transition: background-color var(--time-slow) var(--ease-golden);

    grid-template-columns: 1fr;

    grid-template-rows:
        var(--h-hero)
        repeat(4, var(--h-tile));

    grid-template-areas:
        "t1"
        "t2"
        "t3"
        "t4"
        "t5";
}

/* ═══════════════════════════════════════════════════
   INDIVIDUAL TILES
   ═══════════════════════════════════════════════════ */
.tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-line);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 
        0 var(--u12) var(--u11) rgba(0, 0, 0, 0.06),
        0 var(--u11) var(--u9) rgba(0, 0, 0, 0.12);
    transition: 
        filter var(--time-base) var(--ease-golden),
        box-shadow var(--time-base) var(--ease-golden);
}

/* Enlarge body/perex text inside tiles on desktop */
@media (min-width: 1024px) {
    .tile {
        --f-body: clamp(17px, 1.3vw, 21px);
    }
}

.tile header {
    width: 100%;
    max-width: calc(var(--phi-inv) * 100% - var(--space-line));
    position: relative;
    z-index: var(--z-raised);
}

.tile-logo {
    display: block;
    height: clamp(60px, 6vw, 90px);
    width: auto;
    position: relative;
    z-index: var(--z-raised);
}

/* First tile top header grid layout (places logo to the left of number & title) */
.tile-1 .tile-header-top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-inline);
    row-gap: 0;
    align-items: center;
}

.tile-1 .tile-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    align-self: center;
}

.tile-1 .tile-num {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
}

.tile-1 .tile-title {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
}

.tile-1 .tile-perex {
    margin-top: var(--space-inline);
}

.tile:not(.tile--expanded):hover {
    box-shadow: 
        0 var(--u11) var(--u10) rgba(0, 0, 0, 0.08),
        0 var(--u10) var(--u8) rgba(0, 0, 0, 0.24);
}

/* ─── Photo texture layer (partial rectangle, top-right) ─── */
.tile-texture {
    display: none !important;
}

.tile:not(.tile--expanded):hover .tile-texture {
    transform: scale(var(--scale-hover));
}

/* ─── Tile headings ─── */
.tile h1,
.tile h2 {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    line-height: var(--lh-solid);
    margin: 0 0 var(--space-inline-tight) 0;
    position: relative;
    z-index: var(--z-raised);
}

.tile h1 {
    font-size: var(--f-h1);
}

.tile h2 {
    font-size: var(--f-h2);
}

.tile small {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: var(--f-small);
    font-weight: 400;
    opacity: var(--o-high);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-inline-tight);
}

/* ─── Tile perex ─── */
.tile p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: var(--f-body);
    font-weight: 400;
    line-height: var(--lh-base);
    margin: var(--space-inline-tight) 0 0 0;
    position: relative;
    z-index: var(--z-raised);
}
.tile p:nth-of-type(n+2) {
    font-size: var(--f-small);
}

/* ─── Tile arrow ─── */
.tile-arrow {
    position: absolute;
    bottom: var(--space-line);
    left: var(--space-line);
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-tight);
    color: var(--c-arrow-accent, var(--spiral-color-13));
    cursor: pointer;
    transition: 
        transform var(--time-base) var(--ease-golden), 
        color var(--time-base) var(--ease-golden);
    z-index: var(--z-raised);
}

.tile-arrow .arrow-text {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--f-small);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.tile-arrow svg {
    width: 40px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tile:not(.tile--expanded):hover .tile-arrow {
    transform: translateX(6px) scale(1.05);
    color: var(--c-arrow-accent-hover, var(--spiral-color-15));
}

.tile--expanded .tile-arrow {
    display: none !important;
}

/* ─── Grid area + color (dark text) ─── */
.tile-1 { grid-area: t1; background-color: var(--spiral-color-1); color: var(--c-tile-h-8); }
.tile-2 { grid-area: t2; background-color: var(--spiral-color-2); color: var(--c-tile-h-8); }
.tile-3 { grid-area: t3; background-color: var(--spiral-color-3); color: var(--c-tile-h-8); }
.tile-4 { grid-area: t4; background-color: var(--spiral-color-4); color: var(--c-tile-h-8); }
.tile-5 { grid-area: t5; background-color: var(--spiral-color-5); color: var(--c-tile-h-8); }
.tile-6 { grid-area: t6; background-color: var(--spiral-color-6); color: var(--c-tile-h-8); }
.tile-7 { grid-area: t7; background-color: var(--spiral-color-7); color: var(--c-tile-h-8); }
.tile-8 { grid-area: t8; background-color: var(--spiral-color-8); color: var(--c-tile-h-8); }

/* ─── Perex text ─── */
.tile p { color: var(--c-tile-p-6); }

/* ─── Hero: all text φ× larger ─── */
.tile-1 h1    { font-size: var(--f-h1); }
.tile-1 small { font-size: calc(var(--f-small) * var(--phi)); }
.tile-1 p:first-of-type { font-size: calc(var(--f-body) * var(--phi)); }
.tile-1 p:nth-of-type(n+2) { font-size: var(--f-body); }
/* ═══════════════════════════════════════════════════
   RESPONSIVE: TABLET (≤ 1024px or ≤ 1:1)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) or (max-aspect-ratio: 1/1) {
    .tile-1 p:first-of-type {
        font-size: var(--f-body);
    }
    .tile-1 p:nth-of-type(n+2) {
        font-size: var(--f-small);
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE: MOBILE (≤ 700px or ≤ 3:4)
   ═══════════════════════════════════════════════════ */
@media (max-width: 700px) or (max-aspect-ratio: 3/4) {
    .tile {
        padding: var(--space-page);
        min-height: 0;
    }

    .tile-1 {
        min-height: var(--h-hero);
    }

    .tile-arrow {
        bottom: var(--space-page);
        left: var(--space-page);
    }
}


/* ═══════════════════════════════════════════════════
   DETAIL / FLIP ANIMATION SYSTEM
   ═══════════════════════════════════════════════════ */

/* Back Button (Horizontal Left Arrow) */
.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-inline-tight);
    background: none;
    border: none;
    padding: 0;
    color: var(--c-arrow-accent, var(--spiral-color-13));
    cursor: pointer;
    transition: 
        color var(--time-base) var(--ease-golden),
        transform var(--time-base) var(--ease-golden),
        opacity var(--time-base) var(--ease-golden);
    pointer-events: none;
    z-index: var(--z-overlay);
}

.btn-back .btn-text {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--f-small);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.btn-back svg {
    width: 40px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-back:hover {
    color: var(--c-arrow-accent-hover, var(--spiral-color-15));
}

/* Top Back Button position */
.btn-back-top {
    grid-row: 1;
    grid-column: 1;
    margin-bottom: var(--space-line);
    opacity: 0;
    transform: translateX(10px);
}

.detail-active .btn-back-top {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    margin: var(--layout-padding-x) 0 var(--layout-padding-x) var(--layout-padding-x);
}

.detail-active .btn-back-top:hover {
    transform: translateX(-6px) scale(1.05); /* slides left on hover! */
}

/* Bottom Back Button position */
.btn-back-bottom {
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateX(10px);
}

.detail-active .btn-back-bottom {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.detail-active .btn-back-bottom:hover {
    transform: translateX(-6px) scale(1.05);
}

/* Next Button (Horizontal Right Arrow) */
.btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-inline-tight);
    background: none;
    border: none;
    padding: 0;
    color: var(--c-arrow-accent, var(--spiral-color-13));
    cursor: pointer;
    transition: 
        color var(--time-base) var(--ease-golden),
        transform var(--time-base) var(--ease-golden),
        opacity var(--time-base) var(--ease-golden);
    pointer-events: none;
    z-index: var(--z-overlay);
    opacity: 0;
    transform: translateX(-10px);
}

.btn-next .btn-text {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--f-small);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.btn-next svg {
    width: 40px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-active .btn-next {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.detail-active .btn-next:hover {
    color: var(--c-arrow-accent-hover, var(--spiral-color-15));
    transform: translateX(6px) scale(1.05);
}

/* Detail navigation container */
.detail-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-inline-tight);
    margin-top: clamp(32px, var(--space-line) * var(--phi), 64px);
    border-top: 1px solid var(--c-separator);
    padding-top: var(--space-inline);
    width: 100%;
}

/* Detail view layout container */
.tile-grid.detail-active {
    display: block; /* Disable grid for natural scrolling flow */
    width: calc(100% - 2 * var(--space-item));
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    min-height: auto;
}

.tile-grid.detail-active .tile:not(.tile--expanded) {
    display: none !important;
}

/* Expanded tile header layout */
.tile-grid.detail-active .tile--expanded {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, var(--space-line), 32px);
    width: 100%;
    min-height: auto;
    height: auto;
    box-shadow: none;
    border-radius: 0;
    cursor: default;
    filter: none !important;
    
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.tile-grid.detail-active .tile--expanded header {
    order: 2;
    width: 100%;
    max-width: calc(var(--phi-inv) * 100% + var(--space-line));
    margin: 0;
    padding-left: var(--layout-padding-x);
    padding-right: var(--layout-padding-x);
}

.tile-grid.detail-active .tile--expanded .tile-texture {
    order: 1;
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    height: var(--h-tile);
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    pointer-events: auto;
    cursor: pointer;
    transition: 
        transform var(--time-base) var(--ease-golden),
        opacity var(--time-base) var(--ease-golden),
        filter var(--time-base) var(--ease-golden);
}

.tile-grid.detail-active .tile--expanded .tile-texture:hover {
    transform: scale(var(--scale-sm));
}

/* Detail content styling */
.tile-detail {
    opacity: 0;
    transform: translateY(20px);
    transition: 
        opacity var(--time-base) var(--ease-golden),
        transform var(--time-base) var(--ease-golden);
    margin-top: var(--space-block);
    display: none;
}

.tile-grid.detail-active .tile-detail {
    order: 3;
    display: block;
    width: 100%;
    margin-top: 0;
    padding-left: var(--layout-padding-x);
    padding-right: var(--layout-padding-x);
    padding-top: 0;
    padding-bottom: var(--layout-padding-x);
    background-color: transparent;
    opacity: 1;
    transform: translateY(0);
}

.detail-content {
    max-width: calc(var(--phi-inv) * 100% + var(--space-line));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--c-ink);
    line-height: var(--lh-base);
}

.detail-content h1,
.detail-content h2,
.detail-content h3,
.detail-content h4 {
    font-family: 'Lora', Georgia, serif;
    line-height: var(--lh-solid);
}

.detail-content h3 {
    font-size: var(--f-h3);
    font-weight: 600;
    margin-top: clamp(16px, var(--space-inline), 24px);
    margin-bottom: var(--space-inline);
}

.detail-content p {
    font-size: var(--f-body);
    margin-bottom: var(--space-inline);
    color: var(--c-ink-muted);
}

.detail-content ul {
    margin-bottom: var(--space-inline);
    padding-left: var(--space-inline);
}

.detail-content li {
    font-size: var(--f-body);
    line-height: var(--lh-base);
    margin-bottom: var(--space-inline-tight);
    color: var(--c-ink-muted);
    list-style-type: square;
}

/* Responsive mobile overrides for detail layout */
@media (max-width: 1024px) or (max-aspect-ratio: 1/1) {
    .tile-grid.detail-active {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-top: 0;
    }

    .tile-grid.detail-active .btn-back-top {
        margin-top: var(--space-line);
        margin-left: var(--layout-padding-x);
    }

    .tile-grid.detail-active .tile--expanded {
        gap: var(--space-line);
    }
    
    .tile-grid.detail-active .tile--expanded header {
        max-width: 100%;
        margin-top: var(--space-line);
    }
    
    .detail-content {
        max-width: 100%;
    }
}

/* Enlarged typography for detail view on desktop */
@media (min-width: 1024px) {
    .tile-grid.detail-active .tile--expanded {
        --f-h1: clamp(42px, 4vw, 64px);
        --f-h2: clamp(32px, 2.8vw, 44px);
        --f-h3: clamp(24px, 2vw, 32px);
        --f-body: clamp(17px, 1.3vw, 21px);
        --f-small: clamp(14px, 1.1vw, 16px);
    }
}

/* ═══════════════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════════════ */
.site-footer {
    text-align: center;
    padding: var(--space-page) var(--layout-padding-x);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--f-small);
    color: var(--c-ink-muted);
    width: 100%;
}

.site-footer p {
    margin-bottom: var(--space-inline-tight);
}

.site-footer p:last-child {
    margin-bottom: 0;
}

.site-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--time-base) var(--ease-golden);
}

.site-footer a:hover {
    color: var(--c-ink);
}

/* ═══════════════════════════════════════════════════
   COVER VIDEO OVERLAY
   ═══════════════════════════════════════════════════ */
#cover-video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0b0c10; /* Dark-mode background */
    z-index: 999999; /* Ensure it's on top of everything */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--time-slow) var(--ease-golden), visibility var(--time-slow) var(--ease-golden);
}

#cover-video-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

#cover-video-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#video-loader {
    position: absolute;
    width: 240px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    z-index: 1000000;
}

#video-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #85ccb5; /* Golden/Teal accent */
    transition: width 0.1s linear;
}

/* Easter egg styling in footer */
.footer-easter-egg {
    margin-bottom: var(--space-inline-tight);
}

.footer-easter-egg a {
    font-size: calc(var(--f-small) * 0.9);
    opacity: 0.5;
    text-decoration: none !important;
    transition: opacity var(--time-base) var(--ease-golden);
}

.footer-easter-egg a:hover {
    opacity: 1;
    text-decoration: underline !important;
}