/**
 * SHARED STORIES COMPONENTS STYLESHEET
 *
 * Reusable UI components používané napříč Stories:
 * - Underline pattern (links, buttons)
 * - Navigation buttons
 * - Chapter/Entry links
 *
 * Dependencies:
 * - shared-stories-base.css
 * - /assets/css/tokens/stories-tokens.css
 *
 * Used by:
 * - Story Cover (3.3) - chapter links, navigation
 * - Story Chapter (3.4) - navigation buttons
 * - Stories Timeline (3.0) - helper links, entry links
 *
 * Version: 1.0
 * Created: 2026-01-03
 */

/* ============================================
   UNDERLINE PATTERN
   ============================================ */

/**
 * Generic underline utility class
 * Usage: Apply to text element inside link/button
 *
 * Example:
 * <a href="...">
 *   <span class="underline-text">Link text</span>
 * </a>
 */



/* ============================================
   STORIES LINK (Generic link without color change)
   Used by: chapter-link, card-button, helper-link
   ============================================ */

/**
 * Generic link for Stories section
 * - NO color change on hover (only underline swap)
 * - System font styling
 */
.stories-link {
    font-family: var(--font-family-system);
    font-size: var(--font-size-navigation);
    letter-spacing: var(--letter-spacing-navigation);
    color: var(--color-ui-primary);
    text-decoration: none;
    display: inline-block;
}

/* .stories-link:hover - No color change, only underline swap handled by .stories-link-text */

/**
 * Underline text pattern - consolidated definition
 * All classes share the same background-image underline effect
 * Individual class names preserved for semantic clarity
 */
.underline-text,
.nav-text,
.stories-link-text {
    display: inline-block;
    padding-bottom: 0.3em;
    background-image: var(--underline-02-img);
    background-size: 100% var(--underline-02-height);
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: var(--underline-opacity);
}

/* Hover variant - parent:hover changes underline */
a:hover .underline-text,
button:hover .underline-text,
.underline-text--hover,
.nav-button:hover .nav-text,
.stories-link:hover .stories-link-text {
    background-image: var(--underline-01-img);
    background-size: 100% var(--underline-01-height);
}

/* ============================================
   CHAPTER LINK (Link with underline only on hover)
   Used by: story-cover chapter list
   ============================================ */

/**
 * Chapter link - NO underline by default, underline appears on hover
 * - Same styling as stories-link but without default underline
 * - System font styling
 */
.chapter-link {
    font-family: var(--font-family-system);
    font-size: var(--font-size-navigation);
    letter-spacing: var(--letter-spacing-navigation);
    color: var(--color-ui-primary);
    text-decoration: none;
    display: inline-block;
}

/* .chapter-link:hover - No color change, only underline swap handled by .chapter-link-text */

/**
 * Chapter link text - NO underline by default
 * Underline only appears on hover
 */
.chapter-link-text {
    display: inline-block;
    padding-bottom: 0.3em;
    opacity: var(--underline-opacity);
    /* No background-image by default */
}

.chapter-link:hover .chapter-link-text {
    background-image: var(--underline-01-img);
    background-size: 100% var(--underline-01-height);
    background-position: bottom center;
    background-repeat: no-repeat;
}


/* ============================================
   STORIES LINK SHORT (Short links like "Read")
   Uses separate underline graphics for short text
   ============================================ */

.stories-link-short {
    display: inline-block;
    padding-bottom: 0.3em;
    background-image: var(--underline-short-img);
    background-size: 100% var(--underline-short-height);
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: var(--underline-opacity);
}

.stories-link:hover .stories-link-short {
    background-image: var(--underline-short-hover-img);
    background-size: 100% var(--underline-short-hover-height);
}


/* ============================================
   NAVIGATION BUTTONS (Stories Section Navigation)
   Shared by: story-chapter, story-cover, log-entry, log-book-overview
   ============================================ */

.stories-navigation {
    margin-top: var(--spacing-nav-to-content);
    padding-bottom: var(--margin-bottom);
}

.stories-navigation nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.nav-button {
    font-family: var(--font-family-system);
    font-size: var(--font-size-navigation);
    letter-spacing: var(--letter-spacing-navigation);
    color: var(--color-ui-primary);
    background: var(--nav-button-background);
    padding: var(--nav-button-padding);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-button:hover {
    /* No color change on hover, only underline swap handled by .nav-text */
}

/* .nav-text styles consolidated in UNDERLINE PATTERN section above */

/* Disabled state */
.nav-button:disabled,
.nav-button.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Arrow indicators */
.nav-button--previous::before {
    content: "← ";
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.1em;
}

.nav-button--next::after {
    content: " →";
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.1em;
}

/* Placeholder for missing navigation button (maintains layout) */
.nav-placeholder {
    width: 120px; /* Stejná šířka jako button pro vycentrování */
    visibility: hidden;
}


/* ============================================
   LINK PATTERNS (Generic Interactive Links)
   ============================================ */

/**
 * Generic interactive link with system font
 * Usage: Apply to links in navigation, chapter lists, etc.
 */

.interactive-link {
    font-family: var(--font-family-system);
    font-size: var(--font-size-navigation);
    letter-spacing: var(--letter-spacing-navigation);
    color: var(--color-ui-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

.interactive-link:hover {
    color: var(--color-ui-hover);
}


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

@media (max-width: 768px) {
    /* Navigation - mobile adjustments */
    .nav-button {
        font-size: var(--font-size-navigation-mobile);
    }

    .stories-navigation nav {
        flex-direction: row; /* Ponecháme horizontal i na mobile */
        gap: 0.5rem;
    }

    .nav-button {
        padding: 0.5em 1em;
        font-size: var(--font-size-navigation-mobile);
        flex: 1; /* Rovnoměrné rozdělení */
        text-align: center;
    }

    .nav-placeholder {
        flex: 1;
    }
}


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

@media print {
    .stories-navigation {
        display: none;
    }
}