/* ============================================================
   AKIRA.MEDIA - Archive Stylesheet
   Page-specific styles for the archived web projects page
   (/archive/). Extends the shared base (akiramedia.css).

   Mirrors the conventions established in landing.css: the sticky
   -footer flex column, the preloader reveal wrapper, the themed
   footer text, and the banner/intro typography. The project cards
   reuse the translucent-panel + blur language of the landing
   section cards, adapted for a scalable grid that grows as more
   projects are archived.
   ============================================================ */

/* === Sticky-footer layout ===
   Same approach as the homepage: the body becomes a flex column so
   the footer is pushed to the bottom of the viewport on short pages
   and flows below the content on long ones. The fixed background
   layers (body::before / ::after) are position:fixed and sit outside
   this flex flow. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* === Content reveal ===
   Hidden until the preloader finishes, then faded in (the preloader
   script adds .visible, exactly as on the homepage). flex-grow fills
   the space between banner and footer so the footer sits at the
   bottom. */
#archiveWrap {
    opacity: 0;
    transition: opacity 0.6s ease;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#archiveWrap.visible {
    opacity: 1;
}

/* Footer keeps its height at the bottom of the column */
footer {
    flex-shrink: 0;
}

/* Footer */
footer {
    text-align: center;
    padding: 30px 20px;
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 0.8rem;
    opacity: 0.4;
}
body[data-bs-theme="light"] footer { color: whitesmoke; }
body[data-bs-theme="dark"]  footer { color: black; }

/* Themed footer text - flips with the toggle, matching the homepage.
   (The colour is expected to be absent from the footer's inline style
   in the page markup so these rules apply without !important.) */
body[data-bs-theme="light"] footer {
    color: rgba(255, 255, 255, 0.4);
}
body[data-bs-theme="dark"] footer {
    color: rgba(0, 0, 0, 0.4);
}

/* === Banner ===
   Colours for .title h1 / .subtitle h2 are themed by the base
   stylesheet (whitesmoke on light, black on dark). Sizing/font live
   here, matching the homepage banner so the two pages read as a set. */
.banner {
    text-align: center;
    padding: 45px 20px 10px;
}

.title h1 {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 3.5rem;
    margin: 0;
    letter-spacing: 2px;
}

.subtitle h2 {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 2rem;
    margin: 10px 0 0;
    opacity: 0.85;
}

/* === Archive intro ===
   Short blurb sitting under the banner, describing what the archive
   is. Mirrors .landing-intro: shared Akira font, centred, width
   -constrained, and colour-flipped with the theme (whitesmoke on
   light, black on dark). */
.archive-intro {
    max-width: 80vw;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 1.2rem;
    line-height: 1.6;
}

.archive-intro p {
    margin: 0 0 1em;
}

.archive-intro p:last-child {
    margin-bottom: 0;
}

body[data-bs-theme="light"] .archive-intro { color: whitesmoke; }
body[data-bs-theme="dark"]  .archive-intro { color: black; }

/* === Archive container ===
   Horizontally centred and grows to fill the space between the intro
   and the footer, so the footer is pushed down even when only one or
   two projects are present. The grid inside aligns to the top so
   projects read in order as the list grows. */
.archive-container {
    max-width: 80vw;
    margin: 0 auto;
    padding: 40px 20px 60px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* === Project grid ===
   Scales with the archive: auto-fill lays out as many fixed-width
   columns as fit, wrapping to new rows as projects are added, and
   justify-content:center keeps a single card (or a partial last row)
   centred rather than stranded on the left. align-content:start keeps
   the rows at the top of the growing container. */
.archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
    align-content: start;
}

/* === Project card ===
   The whole card is an <a>, so the entire block is clickable through
   to the archived site. Translucent surface with blur to match the
   landing section cards and the modal panels used elsewhere. The
   panel is adapted per theme further down so the body text stays
   readable on both backgrounds. */
.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 360px;   /* fixed basis, no grow: cards centre instead of filling the row */
    overflow: hidden;
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    color: whitesmoke;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease,
                box-shadow 0.25s ease, border-color 0.25s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.project-card:active {
    transform: translateY(-2px);
}

/* Keyboard focus ring for accessibility (matches the landing cards) */
.project-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

/* === Card media (screenshot) ===
   Fixed aspect box at the top of the card holding the project
   thumbnail. object-fit:cover crops cleanly to the box; a subtle
   zoom on hover echoes the interactive feel of the rest of the site.
   The card degrades gracefully if the media block is omitted - the
   body below still renders. */
.project-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.project-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.project-card:hover .project-thumb {
    transform: scale(1.04);
}

/* Small "Archived" tag over the screenshot. Kept dark in both themes
   for consistent contrast against whatever the screenshot contains. */
.project-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: whitesmoke;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}

/* === Card body === */
.project-card-body {
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
}

.project-card-title {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 1.6rem;
    margin: 0;
    color: whitesmoke;
}

.project-card-meta {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.6);
}

.project-card-desc {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.8);
}

/* === Tech tags ===
   Small pills listing the stack the project was built with. Rendered
   as a <ul> so it stays semantic; list styling is stripped. */
.project-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
}

.project-tag {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

/* === Call to action ===
   Text label (no glyphs, per the site's no-emoji rule) that brightens
   and underlines when the card is hovered. */
.project-card-cta {
    margin-top: 16px;
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: whitesmoke;
    opacity: 0.75;
    transition: opacity 0.25s ease;
	text-align: center;
}

.project-card:hover .project-card-cta {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* === Card theming ===
   Light theme (dark-blue background): keep the dark translucent panel
   and whitesmoke text - this is the base, restated here for clarity.
   Dark theme (mauve background): lighten the panel and flip the text
   to black, so the body copy stays readable rather than black-on-dark.
   This keeps the site's whitesmoke<->black flip while respecting the
   different surface a content card needs versus an image-backed one. */
body[data-bs-theme="light"] .project-card,
body[data-bs-theme="light"] .project-card-title,
body[data-bs-theme="light"] .project-card-cta {
    color: whitesmoke;
}
body[data-bs-theme="light"] .project-card-meta {
    color: rgba(255, 255, 255, 0.6);
}
body[data-bs-theme="light"] .project-card-desc {
    color: rgba(255, 255, 255, 0.8);
}

body[data-bs-theme="dark"] .project-card {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(0, 0, 0, 0.10);
    color: black;
}
body[data-bs-theme="dark"] .project-card:hover {
    border-color: rgba(0, 0, 0, 0.20);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
body[data-bs-theme="dark"] .project-card:focus-visible {
    outline-color: rgba(0, 0, 0, 0.6);
}
body[data-bs-theme="dark"] .project-card-title,
body[data-bs-theme="dark"] .project-card-cta {
    color: black;
}
body[data-bs-theme="dark"] .project-card-meta {
    color: rgba(0, 0, 0, 0.6);
}
body[data-bs-theme="dark"] .project-card-desc {
    color: rgba(0, 0, 0, 0.8);
}
body[data-bs-theme="dark"] .project-tag {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.85);
}

/* === Reduced motion ===
   Hold the hover lift and thumbnail zoom still for users who prefer
   reduced motion, matching the homepage's treatment of the mosaic. */
@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-thumb,
    .project-card-cta {
        transition: none;
    }
    .project-card:hover {
        transform: none;
    }
    .project-card:hover .project-thumb {
        transform: none;
    }
}

/* === Mobile === */
@media (max-width: 768px) {
    .title h1 {
        font-size: 2.4rem;
    }

    .subtitle h2 {
        font-size: 1.1rem;
    }

    .archive-container {
        padding: 28px 20px;
    }

    .project-card {
        flex-basis: 100%;
    }

    .project-card-title {
        font-size: 1.4rem;
    }
	
	.archive-intro{
		font-size: 1rem!important;
		max-width: 95vw!important;
	}
}

/* === Archived-site modal ===
   Opens a project's archived site in an in-page iframe, matching the
   Gallery/Mixes modal language: a dark blurred overlay (kept dark in
   both themes, like the other media modals), an "Escape" close pill,
   and an always-present "Open in new tab" escape hatch. The overlay is
   always in the DOM and toggled via .open so it can fade rather than
   snap. Chrome is theme-independent on purpose: whitesmoke reads on the
   dark bar under both site themes. */
.archive-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.archive-modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.archive-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 95vw;
    height: 100%;
    max-height: 95vh;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background: #000;
}

/* Top bar: title on the left, actions on the right */
.archive-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.archive-modal-title {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: whitesmoke;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Pill buttons - share the site's pill language (border + radius 999px) */
.archive-modal-open,
.archive-modal-close {
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: whitesmoke;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.archive-modal-open:hover,
.archive-modal-close:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.40);
}

.archive-modal-open:focus-visible,
.archive-modal-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* Frame area fills the rest of the modal */
.archive-modal-frame-wrap {
    position: relative;
    flex: 1 1 auto;
    background: #fff;
}

.archive-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Shown only if a frame can't load (blocked/unreachable) - see archive.js */
.archive-modal-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
    font-family: var(--akira-font);
    font-weight: var(--akira-weight);
    font-variation-settings: var(--akira-settings);
    color: whitesmoke;
}

.archive-modal-fallback[hidden] {
    display: none;
}

.archive-modal-fallback a {
    color: whitesmoke;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Lock background scroll while the modal is open */
body.archive-modal-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .archive-modal-overlay {
        transition: none;
    }
}

/* Modal goes near-fullscreen on small screens, where a framed whole site
   needs every pixel; the "Open in new tab" pill matters most here. */
@media (max-width: 768px) {
    .archive-modal-overlay {
        padding: 0;
    }
    .archive-modal-content {
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        border: 0;
    }
    .archive-modal-title {
        font-size: 0.85rem;
    }
    .archive-modal-open,
    .archive-modal-close {
        font-size: 0.72rem;
        padding: 6px 10px;
    }
}

/* === Archived-site modal: theme-aware chrome ===
   Follow the toggle. The base rules above are the dark-modal look (dark
   bar, whitesmoke text), which renders in dark theme. In light theme the
   overrides below flip the bar, pills, title and fallback to a light
   surface with black text. Note this is intentionally the opposite
   direction to the project cards. The overlay scrim stays a neutral dark
   dim in both themes so the modal keeps its focus. */
body[data-bs-theme="light"] .archive-modal-bar {
    background: rgba(245, 245, 245, 0.92);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

body[data-bs-theme="light"] .archive-modal-title {
    color: black;
}

body[data-bs-theme="light"] .archive-modal-open,
body[data-bs-theme="light"] .archive-modal-close {
    border-color: rgba(0, 0, 0, 0.25);
    background: rgba(0, 0, 0, 0.06);
    color: black;
}

body[data-bs-theme="light"] .archive-modal-open:hover,
body[data-bs-theme="light"] .archive-modal-close:hover {
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(0, 0, 0, 0.40);
}

body[data-bs-theme="light"] .archive-modal-open:focus-visible,
body[data-bs-theme="light"] .archive-modal-close:focus-visible {
    outline-color: rgba(0, 0, 0, 0.6);
}

body[data-bs-theme="light"] .archive-modal-fallback {
    background: rgba(245, 245, 245, 0.95);
    color: black;
}

body[data-bs-theme="light"] .archive-modal-fallback a {
    color: black;
}