/* Teachbooks Subpage Styles */
@layer components {
    /* Teachbooks Hero Banner */
    .teachbooks-hero {
        padding-top: calc(80px + var(--space-xl));
        padding-bottom: var(--space-2xl);
        background: linear-gradient(180deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);
        border-bottom: 1px solid var(--color-neutral-200);
        position: relative;
    }

    .teachbooks-badge-wrapper {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        margin-bottom: var(--space-sm);
    }

    .badge-open-source {
        background-color: var(--color-primary-subtle);
        color: var(--color-primary);
        border: 1px solid hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.2);
    }

    .badge-teachbooks-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--fs-xs);
        font-weight: 500;
        color: var(--color-text-muted);
        transition: color var(--transition-fast);
    }

    .badge-teachbooks-link:hover {
        color: var(--color-primary);
    }

    .teachbooks-hero-title {
        font-size: var(--fs-3xl);
        margin-bottom: var(--space-sm);
        letter-spacing: -0.02em;
    }

    .teachbooks-hero-lead {
        font-size: var(--fs-lg);
        max-width: 720px;
        margin-bottom: var(--space-xl);
    }

    /* Search & Filter Controls */
    .catalog-controls {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin-top: var(--space-lg);
        max-width: 800px;
    }

    @media (min-width: 640px) {
        .catalog-controls {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    .search-box {
        position: relative;
        flex-grow: 1;
        max-width: 400px;
    }

    .search-input {
        width: 100%;
        padding: 0.75em 1em 0.75em 2.5em;
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-300);
        border-radius: var(--radius-sm);
        font-size: var(--fs-sm);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .search-input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.1);
    }

    .search-icon {
        position: absolute;
        left: 0.85em;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        color: var(--color-neutral-600);
        pointer-events: none;
    }

    .filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .filter-pill {
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-200);
        color: var(--color-text-muted);
        padding: 0.4em 1em;
        border-radius: var(--radius-full);
        font-size: var(--fs-xs);
        font-weight: 500;
        cursor: pointer;
        transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    }

    .filter-pill:hover {
        border-color: var(--color-neutral-300);
        color: var(--color-neutral-900);
    }

    .filter-pill.active {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }

    /* Catalog Section */
    .catalog-section {
        padding-block: var(--space-3xl);
    }

    .catalog-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    @media (min-width: 768px) {
        .catalog-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1100px) {
        .catalog-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Book Cards */
    .book-card {
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
        position: relative;
    }

    .book-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-neutral-300);
    }

    .book-card-top {
        padding: var(--space-lg);
        background: linear-gradient(135deg, var(--color-bg-subtle) 0%, #ffffff 100%);
        border-bottom: 1px solid var(--color-neutral-100);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .book-icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .book-icon-blue {
        background-color: var(--color-primary-subtle);
        color: var(--color-primary);
    }

    .book-icon-red {
        background-color: var(--color-secondary-subtle);
        color: var(--color-secondary);
    }

    .book-card-body {
        padding: var(--space-lg);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .book-target-tag {
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        margin-bottom: var(--space-xs);
    }

    .book-title {
        font-size: var(--fs-xl);
        margin-bottom: var(--space-xs);
        color: var(--color-neutral-900);
    }

    .book-description {
        font-size: var(--fs-sm);
        color: var(--color-text-muted);
        margin-bottom: var(--space-lg);
        flex-grow: 1;
    }

    .book-meta-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--color-neutral-100);
        margin-bottom: var(--space-md);
    }

    .book-meta-item {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--fs-xs);
        color: var(--color-neutral-600);
    }

    .book-card-footer {
        display: flex;
        gap: var(--space-xs);
        width: 100%;
    }

    .book-card-footer .btn {
        flex-grow: 1;
        font-size: var(--fs-xs);
        padding: 0.7em 1.2em;
    }

    /* Educators / Teachbooks Info Section */
    .educator-section {
        background-color: var(--color-bg-subtle);
        border-block: 1px solid var(--color-neutral-200);
        padding-block: var(--space-3xl);
    }

    .educator-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        align-items: center;
    }

    @media (min-width: 992px) {
        .educator-grid {
            grid-template-columns: 1.2fr 0.8fr;
        }
    }

    .educator-card-box {
        background-color: var(--color-white);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        padding: var(--space-xl);
        box-shadow: var(--shadow-md);
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin-top: var(--space-lg);
    }

    .feature-item {
        display: flex;
        gap: var(--space-sm);
        align-items: flex-start;
    }

    .feature-icon {
        width: 22px;
        height: 22px;
        color: var(--color-primary);
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* No results message */
    .no-results {
        text-align: center;
        padding: var(--space-3xl) var(--space-md);
        grid-column: 1 / -1;
        color: var(--color-text-muted);
        display: none;
    }

    .no-results.visible {
        display: block;
    }
}