/* assets/css/style.css */

:root
{
    --color-bg: #1A1A1A;
    --color-text: #FFFFFF;
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-accent: #F5A623;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'DM Sans', sans-serif;
    --anim-speed: 0.6s;
    --anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    overflow-x: hidden;
}

/* Floating Header */
header
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    pointer-events: none;
    /* Let clicks pass through to columns largely */
}

header *
{
    pointer-events: auto;
    /* Re-enable pointer events for actual buttons */
}

.logo
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-text);
}

.logo img
{
    height: 40px;
    width: auto;
}

.logo span
{
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

nav
{
    display: flex;
    gap: 2rem;
}

.nav-link
{
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.3s, color 0.3s;
}

.nav-link:hover
{
    opacity: 1;
    color: var(--color-accent);
}

/* Main Accordion Container */
.accordion-container
{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Individual Columns */
.column
{
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: flex var(--anim-speed) var(--anim-ease), background-color 0.3s;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    /* Reset for anchor tag */
    color: var(--color-text);
    /* Reset for anchor tag */
}

.column:last-child
{
    border-right: none;
}

.column:hover
{
    flex: 3;
    /* Expand on hover */
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0) 0%, rgba(245, 166, 35, 0.05) 100%);
}

.column:hover .col-content
{
    opacity: 1;
    transform: translateY(0);
}

.column:hover .col-title
{
    color: var(--color-accent);
}

.column:hover .col-illustration
{
    transform: scale(1.1);
    stroke: var(--color-accent);
}

/* Content within columns */
.col-illustration
{
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
    transition: transform var(--anim-speed), stroke 0.3s;
    stroke: var(--color-text);
    /* Default stroke */
    stroke-width: 1.5;
    fill: none;
}

.col-title
{
    font-family: var(--font-serif);
    font-size: 3rem;
    /* Large vertical styling logic usually needs writing-mode if very narrow, but here we assume standard */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s;
}



/* Hidden content that reveals on expand */
.col-content
{
    position: absolute;
    bottom: 15%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
    text-align: center;
    width: 80%;
}

.col-desc
{
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* .btn-explore removed */

/* Desktop Horizontal Title Adjustment */
/* If the column is expanded, we might want the text horizontal. 
   css 'has' or js handles this better, but let's stick to pure css simple approach first.
   vertical text is iconic for these accordions. */

/* Mobile Layout */
/* Mobile Layout */
@media (max-width: 768px)
{
    .accordion-container
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 100vh;
        width: 100vw;
        padding-top: 80px;
        /* Space for fixed header */
        gap: 1px;
        /* Gap for borders if desired, or handle via borders */
        background-color: rgba(255, 255, 255, 0.05);
        /* Separator color */
    }

    .column
    {
        flex: none;
        height: auto;
        min-height: 0;
        width: 100%;
        border: none;
        background-color: var(--color-bg);
        justify-content: center;
        padding: 1.5rem;
        transition: background-color 0.3s;
    }

    .column:hover
    {
        flex: none;
        /* No expansion on mobile */
        background-color: rgba(255, 255, 255, 0.03);
    }

    .column:active
    {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .col-title
    {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 1.25rem;
        margin-top: 1rem;
        text-align: center;
        width: 100%;
    }

    .col-illustration
    {
        width: 50px;
        height: 50px;
        margin-bottom: 0;
    }

    .col-content
    {
        position: static;
        opacity: 0.7;
        transform: none;
        width: 100%;
        margin-top: 0.5rem;
        pointer-events: none;
        /* Click falls through to parent link */
    }

    .col-desc
    {
        display: none;
        /* Clean card look */
    }

    header
    {
        position: fixed;
        background: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .logo img
    {
        height: 32px;
    }

    .logo span
    {
        font-size: 1rem;
    }

    nav
    {
        display: none;
        /* Simplified nav for mobile - or hamburger, but user didn't ask for menu logic, just layout */
    }
}