/* Galironský Herald - Base Newspaper Styles */

:root {
    --page-bg: #1a1f2e;
    --parchment-edge: #e8dcc8;
    --parchment-mid: #f5ead6;
    --parchment-light: #faf6ef;
    --parchment-center: #fdfbf7;
    --text-black: #0d0a08;
    --text-dark: #1a1510;
    --text-medium: #2a1a10;
    --text-brown: #3a2a1a;
    --text-light: #5c4a3a;
    --border-dark: #3a2a1a;
    --border-medium: #5c4a3a;
    --border-light: #8b7355;
    --border-frame: #a08060;
    --highlight-bg: rgba(180, 140, 90, 0.08);

    /* Theme accent colors - can be overridden per issue */
    --accent-primary: var(--text-brown);
    --accent-secondary: var(--text-medium);
    --accent-tertiary: var(--text-light);
}

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

body {
    font-family: 'IM Fell English', 'Georgia', serif;
    background: var(--page-bg);
    min-height: 100vh;
    padding: 2rem;
}

.newspaper {
    max-width: 1100px;
    margin: 0 auto;
}

.newspaper-page {
    max-width: 1100px;
    height: 1556px;
    /* A4 ratio: 1100 × 1.414 */
    overflow: visible;
    margin: 0 auto 3rem auto;
    display: flex;
    flex-direction: column;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(to right, var(--parchment-edge) 0%, var(--parchment-mid) 3%, var(--parchment-light) 10%, var(--parchment-center) 50%, var(--parchment-light) 90%, var(--parchment-mid) 97%, var(--parchment-edge) 100%);
    background-blend-mode: multiply;
    color: var(--text-dark);
    padding: 2rem 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    position: relative;
}

.newspaper-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at top left, rgba(180, 140, 90, 0.12) 0%, transparent 40%),
        radial-gradient(ellipse at top right, rgba(180, 140, 90, 0.08) 0%, transparent 35%),
        radial-gradient(ellipse at bottom left, rgba(180, 140, 90, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(180, 140, 90, 0.15) 0%, transparent 45%);
    pointer-events: none;
}

/* Torn paper edge - border only, filtered separately */
.newspaper-page::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(#e8dcc8, #e8dcc8);
    background-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
    filter: url(#paper-edge);
    /* Cut out the center to create a border frame */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 12px;
}

.newspaper-page:last-child {
    margin-bottom: 0;
}

.newspaper-page>* {
    position: relative;
    z-index: 1;
}

/* ========================================
   MASTHEAD
   ======================================== */

.masthead {
    text-align: center;
    border-bottom: 3px double var(--text-black);
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

.masthead-ornament {
    font-size: 1.5rem;
    color: var(--accent-primary);
    letter-spacing: 0.5rem;
    margin-bottom: 0.5rem;
}

.newspaper-title {
    font-family: 'UnifrakturMaguntia', 'Georgia', serif;
    font-size: 5rem;
    color: var(--text-black);
    text-shadow: 2px 2px 0 rgba(139, 115, 85, 0.2);
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0.5rem 0;
}

.newspaper-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-top: 0.5rem;
}

.info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-medium);
    padding: 0.6rem 0;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--text-brown);
}

.info-bar-center {
    font-style: italic;
}

.edition-info {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.1em;
}

.motto {
    text-align: center;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--accent-primary);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-medium);
    margin-bottom: 1.5rem;
}

/* ========================================
   GRID LAYOUTS
   ======================================== */

.articles-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1.5rem;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Main content area grows to fill space */
.articles-grid,
.articles-grid-2-1,
.articles-grid-equal,
.story-columns {
    flex-grow: 1;
}

/* Two + one column layout (2fr 1fr) */
.articles-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

/* Equal three columns (1fr 1fr 1fr) */
.articles-grid-equal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}

/* Two-column layout for inner pages */
.articles-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Single column for simple sections */
.articles-single {
    max-width: 800px;
    margin: 0 auto;
}

/* ========================================
   ARTICLES
   ======================================== */

article {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(58, 42, 26, 0.4);
}

article:last-child {
    border-bottom: none;
}

.article-headline {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: 0.5rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.main-article .article-headline {
    font-size: 2.2rem;
    text-align: center;
    border-bottom: 3px solid var(--accent-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.article-subheadline {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-brown);
    margin-bottom: 0.75rem;
    text-align: center;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-style: italic;
}

.article-content {
    font-size: 1.05rem;
    line-height: 1.75;
    text-align: justify;
    hyphens: auto;
    color: var(--text-dark);
}

.article-content p {
    margin-bottom: 0.75rem;
    text-indent: 1.5em;
}

.article-content p:first-child {
    text-indent: 0;
}

.article-content p:first-child::first-letter {
    font-size: 2.5em;
    float: left;
    line-height: 1;
    padding-right: 0.1em;
    font-family: 'UnifrakturMaguntia', serif;
    color: var(--accent-secondary);
}

.main-article .article-content p:first-child::first-letter {
    font-size: 4em;
    padding-right: 0.15em;
    color: var(--accent-primary);
}

/* ========================================
   ILLUSTRATIONS
   ======================================== */

.illustration {
    margin: 1rem 0;
    text-align: center;
}

.illustration-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.illustration-frame img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Rough/bitten edge effect using SVG filter */
    filter: url(#rough-edge);
}

.illustration-caption {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--parchment-light);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0.6rem 1.5rem;
    margin: 0;
    /* Wooden plaque background */
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wood'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.15' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wood)'/%3E%3C/svg%3E"),
        linear-gradient(90deg, #5c4a3a 0%, #7a5d42 10%, #8b6914 50%, #7a5d42 90%, #5c4a3a 100%);
    background-blend-mode: soft-light;
    border: 2px solid #4a3828;
    border-top: none;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========================================
   PROMO BOXES (merchant announcements)
   ======================================== */

.promo-box {
    border: 3px double var(--accent-primary);
    padding: 1rem;
    text-align: center;
    background: var(--highlight-bg);
}

.promo-title {
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--accent-secondary);
}

.promo-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.promo-ornament {
    color: var(--accent-tertiary);
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

/* ========================================
   NOTICE BOXES
   ======================================== */

.notice-box {
    border: 2px solid var(--accent-tertiary);
    padding: 1rem;
    margin: 1rem 0;
    background: var(--highlight-bg);
}

.notice-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-medium);
    padding-bottom: 0.5rem;
    color: var(--accent-tertiary);
}

/* ========================================
   WEATHER & OMENS
   ======================================== */

.weather-omens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-medium);
}

.weather,
.omens {
    padding: 0.75rem;
    border: 1px solid var(--border-medium);
    font-size: 0.95rem;
    color: var(--text-dark);
}

.weather-title,
.omens-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-brown);
}

/* ========================================
   DECORATIVE ELEMENTS
   ======================================== */

.flourish {
    text-align: center;
    font-size: 1.5rem;
    color: var(--accent-primary);
    margin: 1rem 0;
    letter-spacing: 0.3rem;
}

.drop-quote {
    font-size: 1.15rem;
    font-style: italic;
    text-align: center;
    padding: 1rem;
    margin: 1rem 0;
    border-left: 3px solid var(--accent-primary);
    border-right: 3px solid var(--accent-primary);
    color: var(--text-medium);
}

.page-number {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-top: auto;
    /* Push to bottom */
    padding-top: 1rem;
    border-top: 1px solid var(--border-medium);
}

/* ========================================
   FOOTER
   ======================================== */

.newspaper-footer {
    padding-top: 1rem;
    text-align: center;
}

.footer-ornament {
    font-size: 1.5rem;
    color: var(--accent-primary);
    letter-spacing: 0.5rem;
    margin-bottom: 0.5rem;
}

.footer-text {
    font-size: 0.9rem;
    color: var(--text-light);
    font-style: italic;
}

.back-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--text-brown);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--border-medium);
    transition: all 0.3s ease;
}

.back-link:hover {
    background: var(--text-brown);
    color: var(--parchment-light);
    border-color: var(--text-brown);
}

/* ========================================
   INNER PAGE HEADER
   ======================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--border-dark);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.page-header-title {
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 1.8rem;
    color: var(--text-black);
}

.page-header-info {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-brown);
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-brown);
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-medium);
}

/* Supplement/Příloha header */
.supplement-header {
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 2.5rem;
    color: var(--text-black);
    text-align: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px double var(--text-black);
}

.supplement-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-brown);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ========================================
   INTERVIEW STYLING
   ======================================== */

.interview-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.interview-speaker {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.interview-text {
    text-indent: 0;
    text-align: left;
}

.interview-content p {
    text-indent: 0;
}

.interview-content p:first-child::first-letter {
    font-size: inherit;
    float: none;
    font-family: inherit;
}

/* ========================================
   TAVERN STORIES SUPPLEMENT
   ======================================== */

.tavern-supplement {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E"),
        linear-gradient(to right, #f8f2e8 0%, #fcf9f4 5%, #fdfcfa 15%, #ffffff 50%, #fdfcfa 85%, #fcf9f4 95%, #f8f2e8 100%);
    background-blend-mode: multiply;
}

.tavern-supplement::before {
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at top left, rgba(200, 180, 150, 0.08) 0%, transparent 30%),
        radial-gradient(ellipse at bottom right, rgba(200, 180, 150, 0.08) 0%, transparent 30%);
}

.tavern-header {
    text-align: center;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-dark);
    position: relative;
}

.tavern-header::before,
.tavern-header::after {
    content: '🜂';
    font-size: 1.5rem;
    color: var(--text-brown);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.tavern-header::before {
    left: 2rem;
}

.tavern-header::after {
    right: 2rem;
}

.tavern-title {
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 3.5rem;
    color: var(--text-black);
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(139, 115, 85, 0.3);
    letter-spacing: 0.05em;
}

.tavern-subtitle {
    font-family: 'IM Fell English', serif;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-brown);
    margin-bottom: 0.5rem;
}

.tavern-location {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* The Meeting - Introduction box */
.tavern-intro {
    background: linear-gradient(135deg, rgba(220, 210, 195, 0.15) 0%, rgba(200, 190, 175, 0.1) 100%);
    border: 2px solid var(--border-medium);
    border-radius: 3px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.tavern-intro::before {
    content: '❧';
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fdfcfa;
    padding: 0 1rem;
    font-size: 1.5rem;
    color: var(--text-brown);
}

.tavern-intro-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-brown);
    text-align: center;
    margin-bottom: 1rem;
}

.tavern-intro-content {
    font-size: 1.1rem;
    line-height: 1.85;
    text-align: justify;
    color: var(--text-dark);
}

.tavern-intro-content p {
    margin-bottom: 0.75rem;
    text-indent: 0;
}

/* ========================================
   STORY SECTION
   ======================================== */

.story-header {
    text-align: center;
    margin: 2rem 0 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-medium);
    border-bottom: 1px solid var(--border-medium);
}

.story-title {
    font-family: 'UnifrakturMaguntia', serif;
    font-size: 2.2rem;
    color: var(--text-black);
    margin-bottom: 0.25rem;
}

.story-author {
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--text-brown);
}

/* Three column story layout */
.story-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    column-gap: 2.5rem;
}

.story-column {
    font-size: 1.05rem;
    line-height: 1.85;
    text-align: justify;
    hyphens: auto;
    color: var(--text-dark);
}

.story-column p {
    margin-bottom: 0.75rem;
    text-indent: 1.5em;
}

.story-column p:first-child {
    text-indent: 0;
}

.story-column p:first-child::first-letter {
    font-size: 3.5em;
    float: left;
    line-height: 0.85;
    padding-right: 0.1em;
    padding-top: 0.05em;
    font-family: 'UnifrakturMaguntia', serif;
    color: var(--text-medium);
}

.story-column.continuation p:first-child::first-letter {
    font-size: inherit;
    float: none;
    font-family: inherit;
    padding: 0;
}

.story-column.continuation p:first-child {
    text-indent: 1.5em;
}

/* Story decorative elements */
.story-divider {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-light);
    margin: 1.5rem 0;
    letter-spacing: 0.5rem;
}

.story-end {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-medium);
}

.story-end-ornament {
    font-size: 1.5rem;
    color: var(--text-brown);
    letter-spacing: 0.3rem;
}

.story-end-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

/* Dialogue styling for stories */
.story-column .dialogue {
    font-style: italic;
}

/* Page continuation marker */
.story-continues {
    text-align: right;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-brown);
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px dotted var(--border-light);
}

.story-continued-from {
    text-align: left;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-brown);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted var(--border-light);
}

/* Direct speech - Czech quotes */
.ds::before {
    content: '„';
}

.ds::after {
    content: '"';
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 900px) {
    .articles-grid {
        grid-template-columns: 1fr 1fr;
    }

    .articles-grid-2-1 {
        grid-template-columns: 1fr;
    }

    .articles-grid-equal {
        grid-template-columns: 1fr 1fr;
    }

    .story-columns {
        grid-template-columns: 1fr 1fr;
    }

    .newspaper-title {
        font-size: 3rem;
    }

    body {
        padding: 1rem;
    }

    .weather-omens {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }

    .articles-grid-equal {
        grid-template-columns: 1fr;
    }

    .story-columns {
        grid-template-columns: 1fr;
    }

    .newspaper-title {
        font-size: 2.2rem;
    }

    .info-bar {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .newspaper-page {
        padding: 1.5rem 1rem;
    }

    .articles-two-col {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    body {
        background: none;
        padding: 0;
    }

    .newspaper-page {
        width: 190mm;
        /* A4 minus 1cm each side: 210 - 20 */
        height: 277mm;
        /* A4 minus 1cm each side: 297 - 20 */
        max-width: 190mm;
        margin: 0 auto;
        padding: 10mm 15mm;
        box-shadow: none;
        page-break-after: always;
        overflow: hidden;
    }

    .newspaper-page:last-child {
        page-break-after: avoid;
    }
}