/**
 * STORY-COVER STYLESHEET
 *
 * Stylování pro Story-Book Cover stránku (3.3)
 *
 * Dependencies:
 * - /assets/css/tokens/storybook-tokens.css (imported in layout)
 * - /css/shared/shared-stories-base.css (imported in layout)
 * - /css/shared/shared-stories-components.css (imported in layout)
 *
 * Version: 2.0 (Refactored - 2026-01-03)
 * Previous: 418 lines → Current: ~180 lines (-57% reduction)
 *
 * NOTE: Global reset, page layout, breadcrumbs, and accessibility
 * are now in shared-stories-base.css
 */


/* ============================================
   COVER HEADER
   ============================================ */

.cover-header {
    margin-bottom: var(--cover-spacing-title-to-image);
    text-align: center;
}

.cover-header h1 {
    font-family: var(--font-family-story);
    font-size: var(--font-size-cover-title);
    font-weight: 600;
    line-height: var(--line-height-header);
    letter-spacing: var(--letter-spacing-header);
    color: var(--color-text-header);
}


/* ============================================
   COVER IMAGE
   ============================================ */

.cover-image-wrapper {
    text-align: center;
    margin-bottom: var(--cover-spacing-image-to-annotation);
}

.cover-image {
    max-width: var(--cover-image-max-width);
    width: 100%;
    height: auto;
    display: inline-block;
}


/* ============================================
   COVER ANNOTATION (Teaser)
   ============================================ */

.cover-annotation {
    font-family: var(--font-family-story);
    font-size: var(--font-size-story-body);
    line-height: var(--line-height-story);
    letter-spacing: var(--letter-spacing-story);
    color: var(--color-text-primary);
    margin-bottom: var(--cover-spacing-annotation-to-chapters);
    text-align: left;
}


/* ============================================
   CHAPTERS LIST
   ============================================ */

.chapters-section {
    margin-top: var(--cover-spacing-annotation-to-chapters);
    margin-bottom: var(--chapters-spacing-after);
}

.chapters-heading {
    display: none; /* Nadpis odstraněn dle požadavku */
}

.chapters-list {
    display: grid;
    grid-template-columns: repeat(2, auto); /* Dva sloupce */
    grid-auto-flow: column; /* Plní po sloupcích (1-4 vlevo, 5-7 vpravo) */
    grid-template-rows: repeat(4, auto); /* 4 řádky (pro 7 kapitol: 4+3) */
    column-gap: var(--chapters-gap-column);
    row-gap: var(--chapters-gap-row);
    list-style: none;
    padding-left: var(--chapters-left-indent);
}

/* .chapter-link and .chapter-link-text from shared-stories-components.css */
/* Underline appears only on hover */

.chapter-link {
    padding: 0.5em 0; /* Extra padding specific to chapter list */
}


/* ============================================
   CHAPTER BADGES & BOOKMARK INDICATORS
   ============================================ */

/* Make chapter items position-relative for absolute badge positioning */
.chapter-item {
    position: relative;
}

/* UNREAD badge - floats close to chapter text */
.chapter-item [data-status-badge] {
    position: absolute;
    right: auto;
    left: 7rem; /* Positioned right after "Chapter X" text */
    top: 40%;
    transform: translateY(-40%); /* Adjusted to better align with text baseline */
    pointer-events: none;
    line-height: 1;
}

/* Bookmark indicator - floats next to badge */
.chapter-item [data-bookmark-indicator] {
    position: absolute;
    right: auto;
    left: 7rem; /* Positioned right after "Chapter X" text */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 1.25rem;
    pointer-events: none;
}

/* Adjust if both are present */
.chapter-item [data-status-badge]:not(:empty) ~ [data-bookmark-indicator] {
    left: 9rem; /* Extra space when badge is present */
}


/* ============================================
   NAVIGATION (Next to Chapter 1)
   ============================================ */

/* Override shared component - justify-end instead of space-between */
.stories-navigation nav {
    justify-content: flex-end;
}


/* ============================================
   RESPONSIVE DESIGN (Mobile)
   ============================================ */

@media (max-width: 768px) {

    /* Typography adjustments */
    .cover-header h1 {
        font-size: var(--font-size-cover-title-mobile);
        word-wrap: break-word;
    }

    /* Cover image - full width on mobile */
    .cover-image {
        max-width: var(--cover-image-max-width-mobile);
    }

    /* Annotation - left aligned */
    .cover-annotation {
        text-align: left;
    }

    /* Chapters list - single column on mobile */
    .chapters-list {
        grid-template-columns: 1fr;
        grid-template-rows: auto; /* Reset rows na mobile */
        grid-auto-flow: row; /* Plní po řádcích na mobile */
        padding-left: 1rem; /* Menší indent na mobilu */
    }

    /* Mobile: Inline badges instead of absolute positioning */
    .chapter-item [data-status-badge],
    .chapter-item [data-bookmark-indicator] {
        position: static;
        transform: none;
        display: inline-block;
        margin-left: 0.5rem;
    }

    /* Bookmark rotation on mobile */
    .chapter-item [data-bookmark-indicator] {
        transform: rotate(-90deg);
    }
}


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

@media print {
    .cover-annotation {
        text-align: left;
    }
}