/* Stili per la pagina della singola zine */

/* Variabile per il colore tematico della pagina */
:root {
    --zine-theme-color: #00ccfe; /* Blu per "Blue Shades" */
}

/* 1. Hero Section */
.zine-hero {
    background: var(--zine-theme-color);
    padding: var(--spacing-large);
    border: var(--border-normal);
    box-shadow: var(--shadow-box);
}

.hero-layout {
    display: grid;
    /* Layout modificato: 2fr per l'immagine, 1fr per il testo */
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.zine-hero-text {
    text-align: left;
    /* Il testo va nella seconda colonna */
    order: 2;
}

.hero-description {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

.zine-cover-showcase {
    position: relative;
    max-width: 100%; /* L'immagine riempie la colonna */
    margin: 0 auto;
    /* L'immagine va nella prima colonna */
    order: 1;
}

.zine-cover-showcase img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 2px solid black;
    clip-path: polygon(0 5%, 5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%);
}

.zine-cover-showcase::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid black;
    z-index: -1;
    clip-path: polygon(0 7%, 7% 0, 93% 0, 100% 7%, 100% 93%, 93% 100%, 7% 100%, 0 93%);
}

/* La sezione galleria non è più presente, quindi i suoi stili sono stati rimossi. */

/* 3. Call to Action e Bottone Indietro */
.zine-cta .content-item {
    text-align: center;
}

.back-to-zines-btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-base);
    padding: var(--spacing-medium) var(--spacing-large);
    border: var(--border-thin);
    box-shadow: var(--shadow-box);
    font-weight: bold;
    font-size: var(--font-normal);
    text-decoration: none;
    transition: all 0.3s;
    margin-top: 2rem;
}

.back-to-zines-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0 var(--color-base);
}

/* Media query per mobile */
@media (max-width: 768px) {
    .hero-layout {
        /* Su mobile torna a colonna singola */
        grid-template-columns: 1fr;
    }
    
    .zine-hero-text {
        text-align: center;
        /* Il testo va sotto l'immagine */
        order: 2;
    }
    
    .zine-cover-showcase {
        margin-top: 0;
        /* L'immagine va sopra il testo */
        order: 1;
    }
}