/* ===== Academy Page Styles ===== */

/* Nav active state */
.nav-active {
    color: var(--blue) !important;
    font-weight: 700 !important;
}

/* ===== Academy Hero ===== */
.academy-hero {
    padding: 100px 32px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.academy-hero-card {
    background: #1a1a1a;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 80px 60px 60px;
    text-align: center;
    color: #fff;
}

.academy-hero-handwriting {
    display: block;
    font-size: 1.1rem;
    color: #f5d76e;
    margin-bottom: 16px;
    font-style: italic;
    letter-spacing: 1px;
}

.academy-hero-card h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.2;
}

.academy-hero-card p {
    font-family: var(--font-sub);
    font-size: 1.05rem;
    color: rgba(255,255,255,0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ===== Tab Bar ===== */
.academy-tabs-bar {
    background: #1a1a1a;
    max-width: 1136px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 72px;
    z-index: 50;
}

.academy-tabs-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 32px;
}

.academy-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.academy-tab svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.academy-tab:hover {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.academy-tab:hover svg {
    opacity: 1;
}

.academy-tab.active {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
    font-weight: 700;
}

.academy-tab.active svg {
    opacity: 1;
    stroke: #1a1a1a;
}

/* ===== Content Filter Bar ===== */
.content-filter-bar {
    background: #f8f9fa;
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    max-width: 1136px;
    margin: 0 auto;
}

.content-filter-bar .filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.content-filter-bar .filter-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.content-filter-bar .filter-tag {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--gray);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.content-filter-bar .filter-tag:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.content-filter-bar .filter-tag.active {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
    font-weight: 600;
}

/* Favorites filter chip (Tools tab) — heart icon inline with label.
   Uses the same pill sizing as other chips so it sits flush in the
   row. The heart colour stays red in every state so it always reads
   as "favorites" at a glance, even when the chip is active. */
.content-filter-bar .filter-tag-favorites {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.content-filter-bar .filter-tag-favorites .filter-tag-heart {
    color: #FC3D43;
    flex: 0 0 auto;
}
.content-filter-bar .filter-tag-favorites:hover {
    border-color: #FC3D43;
    color: #FC3D43;
}
.content-filter-bar .filter-tag-favorites.active {
    background: #FC3D43;
    border-color: #FC3D43;
    color: #fff;
}
.content-filter-bar .filter-tag-favorites.active .filter-tag-heart {
    color: #fff;
}

/* Tools Search */
.tools-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 8px 18px;
    min-width: 200px;
    transition: var(--transition);
}

.tools-search svg {
    flex-shrink: 0;
    color: var(--gray);
}

.tools-search input {
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 0.85rem;
    width: 100%;
    color: var(--dark);
}
.tools-search:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 92, 255, 0.2);
}
.tools-search input:focus-visible {
    outline: none;
}

.tools-search input::placeholder {
    color: var(--gray);
}

/* ===== Tab Content ===== */
.tab-content {
    display: none;
    animation: fadeInUp 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Articles Grid ===== */
.articles-section {
    padding: 32px 32px 120px;
    max-width: 1200px;
    margin: 0 auto;
}

.articles-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ===== Article Card ===== */
.article-card {
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid var(--border);
    transition: var(--transition);
    min-height: 240px;
}

.article-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.article-card.dark-card {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.06);
}

.dark-card .article-content h3 { color: #fff; }
.dark-card .article-content p { color: rgba(255,255,255,0.55); }
.dark-card .article-link { color: #fff; }

.article-image {
    flex: 0 0 220px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.article-image-icon {
    width: 56px;
    height: 56px;
    opacity: 0.5;
}

.article-image-icon svg { width: 100%; height: 100%; }

.article-tags {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
}

.tag-pill {
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.tag-blue { background: var(--blue); color: #fff; }
.tag-gold { background: var(--gold); color: #333; }
.tag-green { background: var(--green); color: #fff; }
.tag-gray { background: #dfe6e9; color: #333; }
.tag-purple { background: var(--purple); color: #fff; }
.tag-pink { background: var(--pink); color: #fff; }

.article-content {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    color: var(--dark);
}

.article-content p {
    font-family: var(--font-sub);
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue);
    transition: var(--transition);
    align-self: flex-start;
    margin-top: auto;
}

.article-link:hover { gap: 10px; }

.article-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.article-card-readtime {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--gray);
    font-family: var(--font-sub);
}
.article-card-readtime svg {
    opacity: 0.6;
}

/* ===== Courses Grid ===== */
.courses-section {
    padding: 32px 32px 120px;
    max-width: 1200px;
    margin: 0 auto;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ===== Course Card ===== */
.course-card {
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.course-thumbnail {
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.course-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    backdrop-filter: blur(4px);
}

.course-card:hover .course-play-btn {
    background: rgba(0,0,0,0.5);
    transform: scale(1.1);
}

.course-play-btn svg {
    margin-right: -3px;
}

.course-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 14px;
    border-radius: 50px;
    background: var(--blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.recording-badge {
    background: #e74c3c;
}

.course-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-body .tag-pill {
    align-self: flex-start;
    margin-bottom: 12px;
}

.course-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
    color: var(--dark);
}

.course-body p {
    font-family: var(--font-sub);
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    margin-top: auto;
}

.course-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--gray);
    font-family: var(--font-sub);
}

.course-meta svg {
    flex-shrink: 0;
}

.course-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue);
    transition: var(--transition);
    align-self: flex-start;
    /* Ensure WCAG-recommended 44px touch target on all devices */
    min-height: 44px;
    padding: 10px 4px;
}

.course-cta:hover { gap: 10px; }

/* ===== Tools Grid ===== */
.tools-section {
    padding: 32px 32px 120px;
    max-width: 1200px;
    margin: 0 auto;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ===== Tool Card ===== */
.tool-card {
    position: relative; /* anchor for the absolutely-positioned .tool-like-btn */
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 28px;
    border: 1px solid var(--border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.tool-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.tool-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.tool-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
}

.tool-company {
    font-size: 0.75rem;
    color: var(--gray);
    font-family: var(--font-sub);
}

.tool-card p {
    font-family: var(--font-sub);
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: auto;
}

.tool-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    transition: var(--transition);
    align-self: flex-start;
}

.tool-link:hover { gap: 10px; }

/* Tool Card Actions Row */
.tool-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Tool Card Rating */
.tool-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    direction: ltr;
    min-height: 18px;
}

.tool-card-rating-text {
    font-size: 0.78rem;
    color: var(--gray);
    font-family: var(--font-sub);
    direction: rtl;
}

/* Tool Detail Link */
.tool-card-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray);
    transition: var(--transition);
}

.tool-card-detail-link:hover {
    color: var(--blue);
    gap: 8px;
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: 72px 32px;
    color: var(--gray);
    font-family: var(--font-sub);
    font-size: 1rem;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(25, 92, 255, 0.06);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.empty-state h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}
.empty-state p {
    font-size: 0.95rem;
    color: var(--gray);
    max-width: 440px;
    line-height: 1.6;
    margin: 0;
}
.empty-state-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}
.empty-state-btn {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}
.empty-state-btn:hover {
    background: #1550e0;
    transform: translateY(-1px);
}
.empty-state-btn-ghost {
    background: transparent;
    color: var(--blue);
    border: 1px solid rgba(25, 92, 255, 0.25);
}
.empty-state-btn-ghost:hover {
    background: rgba(25, 92, 255, 0.06);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .articles-container {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .academy-hero {
        padding: 90px 16px 0;
    }

    /* Flat bottom — the tabs container below continues the card visually
       with matching dark bg and bottom radius. */
    .academy-hero-card {
        padding: 44px 22px 26px;
        border-radius: 22px 22px 0 0;
    }

    .academy-hero-card h1 {
        font-size: 2rem;
    }

    /* ===== Mobile: hero + tabs as ONE unified rounded card =====
       The tabs bar no longer extends beyond the hero card. Instead, its
       inner container picks up where the hero card ends — same dark color,
       flat top (continues from hero), rounded bottom corners, identical
       side margins. Visually the hero and the 3-tab segmented control feel
       like a single elegant dark card floating on the page. */
    .academy-tabs-bar {
        position: static;                    /* no sticky on mobile — fixes clipping over the hero corners */
        top: auto;
        max-width: 100%;
        margin: 0;
        padding: 0 16px;                     /* same 16px gutter as the hero */
        background: transparent;             /* the dark is now on the INNER container */
        border-top: none;
    }
    .academy-tabs-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 14px 10px 16px;             /* matches hero's bottom padding */
        background: #1a1a1a;                 /* same dark as hero-card */
        border: none;
        border-top: 1px solid rgba(255,255,255,0.07); /* subtle divider between hero and tabs */
        border-radius: 0 0 22px 22px;        /* rounded only where the card ends */
        max-width: 100%;
        box-shadow: 0 18px 40px -22px rgba(0,0,0,0.55);
    }
    .academy-tab {
        padding: 10px 4px;
        font-size: 0.73rem;
        font-weight: 600;
        flex-direction: column;
        gap: 4px;
        border-radius: 11px;
        border: none;
        background: rgba(255,255,255,0.04);
        color: rgba(255,255,255,0.68);
        min-height: 54px;
        justify-content: center;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
    .academy-tab svg {
        width: 17px;
        height: 17px;
        opacity: 0.55;
    }
    .academy-tab:hover {
        border: none;
        background: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.92);
    }
    .academy-tab.active {
        background: #fff;
        color: #1a1a1a;
        box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    }
    .academy-tab.active svg {
        opacity: 1;
        stroke: #1a1a1a;
    }

    /* ===== Mobile: filter chips rail =====
       Now floats below the unified dark card on a transparent background
       (so it doesn't add another visual "slab"). iOS-style horizontal
       scroll rail. When there's only a single chip ("הכל") we hide the
       whole bar — nothing to filter by is worse than showing a lonely pill. */
    .content-filter-bar {
        padding: 18px 0 6px;
        background: transparent;
        border-bottom: none;
        max-width: 100%;
    }
    .content-filter-bar .filter-container {
        display: block;
        padding: 0;
    }
    .content-filter-bar .filter-tags {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        padding: 2px 16px;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 16px;
    }
    .content-filter-bar .filter-tags::-webkit-scrollbar {
        display: none;
    }
    .content-filter-bar .filter-tag {
        flex: 0 0 auto;
        padding: 8px 16px;
        font-size: 0.82rem;
        font-weight: 500;
        border-radius: 999px;
        scroll-snap-align: start;
        white-space: nowrap;
        background: #fff;
        border: 1px solid var(--border);
    }
    .content-filter-bar .filter-tag.active {
        background: var(--dark);
        color: #fff;
        border-color: var(--dark);
        box-shadow: 0 2px 10px rgba(26,26,46,0.18);
    }
    /* Hide the whole filter bar when it only contains "הכל" — a single
       chip looks lonely and has nothing useful to do. Requires :has()
       support (Chrome 105+, Safari 15.4+, Firefox 121+). */
    .content-filter-bar:has(.filter-tags > .filter-tag:only-child) {
        display: none;
    }

    /* Tools search on mobile: full width, sits below the chip rail */
    .tools-search {
        width: calc(100% - 32px);
        margin: 12px 16px 2px;
    }

    .tools-search {
        width: 100%;
    }

    .articles-section,
    .courses-section,
    .tools-section {
        padding: 24px 16px 48px;
    }

    .article-card {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .article-image {
        flex: none;
        min-height: 180px;
    }

    .article-content {
        padding: 24px 20px;
    }

    .courses-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    /* Mobile nav: academy page uses the shared drawer rules from style.css.
       We only declare the nav-toggle visibility here. */
    .nav-toggle {
        display: flex;
    }
}