/*
Theme Name: Academy Alami
Theme URI: https://example.com
Author: Academy Alami
Author URI: https://example.com
Description: Custom WordPress theme for Academy Alami.
Version: 0.1.0
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: academy-alami
Domain Path: /languages
*/
/* =========================================================
   Academy Alami - Horizontal Content Slider
   ========================================================= */

.content-slider {
	position: relative;
	width: 100%;
}

.content-slider__viewport {
	overflow: hidden;
	width: 100%;
}

.content-slider__track {
	display: flex;
	gap: 24px;

	width: max-content;

	transition: transform 350ms ease;
	will-change: transform;
}


/* ---------------------------------------------------------
   Slider Item
   --------------------------------------------------------- */

.content-slider__item {
	flex: 0 0 calc((100% - 72px) / 4);
	min-width: 0;
}


/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */

.content-slider__navigation {
	display: flex;
	align-items: center;
	gap: 10px;
}

.content-slider__button {
	width: 42px;
	height: 42px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;

	background: transparent;
	color: inherit;

	font-size: 18px;

	cursor: pointer;

	transition:
		background 180ms ease,
		border-color 180ms ease,
		opacity 180ms ease;
}

.content-slider__button:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .3);
}

.content-slider__button:disabled {
	opacity: .35;
	cursor: default;
}


/* ---------------------------------------------------------
   Light Sections
   --------------------------------------------------------- */

.section:not(.section--dark) .content-slider__button {
	border-color: var(--color-border);
	color: var(--color-text);
}

.section:not(.section--dark) .content-slider__button:hover {
	background: rgba(15, 23, 42, .04);
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.content-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;

	margin-bottom: 40px;
}

.content-section__header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.content-section__more {
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;

	white-space: nowrap;
}

.content-section__more:hover {
	text-decoration: underline;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1100px) {

	.content-slider__item {
		flex-basis: calc((100% - 24px) / 2);
	}

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 650px) {

	.content-section__header {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
	}

	.content-section__header-actions {
		width: 100%;
		justify-content: space-between;
	}

	.content-slider__viewport {
		overflow-x: auto;

		scrollbar-width: none;

		scroll-behavior: smooth;
	}

	.content-slider__viewport::-webkit-scrollbar {
		display: none;
	}

	.content-slider__track {
		transform: none !important;
	}

	.content-slider__item {
		flex-basis: min(82vw, 320px);
	}

	.content-slider__navigation {
		display: none;
	}

}

/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero__visual {
	position: relative;

	width: 100%;
	max-width: 570px;

	min-width: 0;

	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---------------------------------------------------------
   Slider
   --------------------------------------------------------- */

.hero-visual {
	position: relative;

	width: 100%;

	aspect-ratio: 4 / 3;

	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---------------------------------------------------------
   Image Container
   --------------------------------------------------------- */

.hero-visual__image-wrap {
	position: relative;

	width: 100%;
	height: 100%;

	overflow: hidden;

	border-radius: 28px;

	background:
		linear-gradient(
			135deg,
			#eef2ff,
			#f8fafc
		);

	box-shadow:
		0 25px 70px rgba(15, 23, 42, 0.12);
}


/* ---------------------------------------------------------
   Slides
   --------------------------------------------------------- */

.hero-visual__slide {
	position: absolute;

	inset: 0;

	opacity: 0;

	visibility: hidden;

	transition:
		opacity 900ms ease,
		visibility 900ms ease;
}


.hero-visual__slide.is-active {
	opacity: 1;

	visibility: visible;

	z-index: 2;
}


.hero-visual__slide img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;
}


/* ---------------------------------------------------------
   Decorative Icons
   --------------------------------------------------------- */

.hero-visual__decoration {
	position: absolute;

	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;
}


.hero-icon {
	width: 64px;
	height: 64px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 20px;

	background: rgba(255, 255, 255, 0.94);

	border: 1px solid rgba(79, 70, 229, 0.10);

	box-shadow:
		0 15px 40px rgba(15, 23, 42, 0.12);

	color: #3157f5;

	font-size: 23px;
	font-weight: 800;

	backdrop-filter: blur(12px);
}


.hero-icon--small {
	width: 52px;
	height: 52px;

	border-radius: 16px;

	font-size: 19px;
}


/* ---------------------------------------------------------
   Decoration Positions
   --------------------------------------------------------- */

.hero-visual__decoration--top {
	top: -24px;

	right: 10%;
}


.hero-visual__decoration--left {
	left: -28px;

	top: 35%;
}


.hero-visual__decoration--right {
	right: -24px;

	bottom: 18%;
}


/* ---------------------------------------------------------
   Glow
   --------------------------------------------------------- */

.hero-visual__glow {
	position: absolute;

	z-index: 0;

	width: 240px;
	height: 240px;

	right: 10%;
	top: 10%;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(79, 70, 229, 0.20),
			rgba(79, 70, 229, 0) 70%
		);

	filter: blur(10px);

	pointer-events: none;
}


/* ---------------------------------------------------------
   Empty State
   --------------------------------------------------------- */

.hero-visual--empty {
	border-radius: 28px;

	background:
		linear-gradient(
			135deg,
			#eef2ff,
			#f8fafc
		);

	box-shadow:
		0 25px 70px rgba(15, 23, 42, 0.08);
}


.hero-visual--empty .hero-visual__empty-icon {
	width: 90px;
	height: 90px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 24px;

	background: rgba(255, 255, 255, 0.85);

	color: #3157f5;

	font-size: 32px;

	box-shadow:
		0 15px 40px rgba(15, 23, 42, 0.08);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

	.hero__visual {
		max-width: 520px;
		margin-inline: auto;
	}

	.hero-visual__decoration--left {
		left: -16px;
	}

	.hero-visual__decoration--right {
		right: -16px;
	}

}


@media (max-width: 600px) {

	.hero__visual {
		max-width: 100%;
	}

	.hero-visual {
		aspect-ratio: 4 / 3;
	}

	.hero-visual__image-wrap {
		border-radius: 22px;
	}

	.hero-icon {
		width: 48px;
		height: 48px;

		border-radius: 15px;

		font-size: 18px;
	}

	.hero-icon--small {
		width: 42px;
		height: 42px;
	}

	.hero-visual__decoration--top {
		top: -15px;
		right: 8%;
	}

	.hero-visual__decoration--left {
		left: -10px;
	}

	.hero-visual__decoration--right {
		right: -10px;
	}

}


/* =========================================
   DropDown styles (Dropdown Menu)
========================================= */

/* ???? ???? - ???? ???? ??????? */
.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 24px; /* ????? ??? ???????? ??? */
}

/* ???????? ???? ??? */
.primary-menu > li {
    position: relative; /* ???? ????? ???? ????????? ????? ???? ?? ??? ???? ????? */
}

/* ?????? ??????? */
.primary-menu a {
    text-decoration: none;
    color: var(--text-color); /* ??? ?????? ??? ????? ??? ?? ????? ??? ?? ?? ??? ???? #333 ?? ???? */
    font-weight: 500;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

/* ??? ???? ???? ???? */
.primary-menu a:hover {
    color: var(--primary-color); /* ??? ?????? ??? ????? ??? ?? ???? */
}

/* ?????? ???????????? (Sub-menus) */
.primary-menu .sub-menu {
    position: absolute;
    top: 100%; /* ???? ????? ??? ???? ???? */
    right: 0; /* ??? ???? RTL ???? ?? ???? ???? ???? */
    background-color: #fff; /* ??? ???????? ???????? */
    min-width: 200px; /* ????? ??? ???? ????? */
    list-style: none;
    margin: 0;
    padding: 10px 0;
    border-radius: 8px; /* ???????? ??? */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* ?? ???? ????? */
    opacity: 0; /* ?? ???? ???? ????? */
    visibility: hidden; /* ?? ???? ???? ????? */
    transform: translateY(10px); /* ?? ?? ???? ????? ???? ???? ??? ??? */
    transition: all 0.3s ease;
    z-index: 999; /* ???? ??? ???? ????? ???? */
}

/* ????? ????????? ???? ??? ???? ??? ???? ???? */
.primary-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ???????? ???? ????????? */
.primary-menu .sub-menu li {
    position: relative;
}

/* ???????? ???? ????????? */
.primary-menu .sub-menu a {
    padding: 10px 20px;
    font-size: 0.9em;
}

/* ??? ???????? ???? ??? ???? ?? ???? ????????? */
.primary-menu .sub-menu a:hover {
    background-color: #f8f9fa;
}

/* ??? ????????? ?? ?? ?? ?????? (????? ???) */
.primary-menu .sub-menu .sub-menu {
    top: 0;
    right: 100%; /* ??? ???? ??? ?? ???? ???? (??? RTL ???) */
    transform: translateX(10px);
}

.primary-menu .sub-menu li:hover > .sub-menu {
    transform: translateX(0);
}

/* ========================================
   Scroll To Top
======================================== */

.scroll-to-top {
    position: fixed;
    left: 24px;
    bottom: 24px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 50%;

    background: #2563eb;
    color: #ffffff;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    box-shadow:
        0 8px 24px rgba(37, 99, 235, 0.18);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

    z-index: 9999;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: #1d4ed8;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.25);
}

.scroll-to-top:active {
    transform: translateY(-1px);
}

.scroll-to-top svg {
    display: block;
}


/* Mobile */
@media (max-width: 768px) {

    .scroll-to-top {
        left: 16px;
        bottom: 16px;

        width: 42px;
        height: 42px;
    }

    .scroll-to-top svg {
        width: 18px;
        height: 18px;
    }

}


/* ========================================
   Blog Page
======================================== */

.blog-page {
    min-height: 100vh;
}


/* ----------------------------------------
   Blog Hero
---------------------------------------- */

.blog-hero {
    padding: 90px 0 70px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 235, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(99, 102, 241, 0.06),
            transparent 35%
        );
}

.blog-hero__content {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.blog-hero h1 {
    margin: 18px 0 20px;

    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.35;
    font-weight: 800;

    color: #111827;
}

.blog-hero p {
    max-width: 650px;
    margin: 0 auto;

    color: #64748b;

    font-size: 17px;
    line-height: 2;
}


/* ----------------------------------------
   Blog Search
---------------------------------------- */

.blog-search {
    margin-bottom: 70px;
}

.blog-search__form {
    max-width: 760px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.06);
}

.blog-search__form input {
    flex: 1;

    min-width: 0;

    height: 52px;

    padding: 0 18px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #0f172a;

    font-family: inherit;
    font-size: 15px;
}

.blog-search__form input::placeholder {
    color: #94a3b8;
}

.blog-search__form button {
    flex-shrink: 0;

    height: 52px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    border-radius: 12px;

    background: #2563eb;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.blog-search__form button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}


/* ----------------------------------------
   Results Heading
---------------------------------------- */

.blog-results-heading {
    margin-bottom: 36px;
}

.blog-results-heading h2 {
    margin: 12px 0 0;

    font-size: 28px;
    line-height: 1.5;

    color: #0f172a;
}


/* ----------------------------------------
   Blog Grid
---------------------------------------- */

.blog-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}


/* ----------------------------------------
   Blog Card
---------------------------------------- */

.blog-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-5px);

    border-color: rgba(37, 99, 235, 0.2);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08);
}


/* ----------------------------------------
   Card Image
---------------------------------------- */

.blog-card__image-link {
    display: block;
}

.blog-card__image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #f1f5f9;
}

.blog-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.blog-card:hover .blog-card__image img {
    transform: scale(1.04);
}

.blog-card__image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    color: #2563eb;

    font-size: 30px;
    font-weight: 800;
}


/* ----------------------------------------
   Card Content
---------------------------------------- */

.blog-card__content {
    padding: 24px;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 16px;

    font-size: 12px;
    color: #94a3b8;
}

.blog-card__category {
    padding: 6px 10px;

    border-radius: 999px;

    background: #eff6ff;
    color: #2563eb;

    font-weight: 700;
}

.blog-card__title {
    margin: 0 0 12px;

    font-size: 20px;
    line-height: 1.65;
    font-weight: 800;

    color: #0f172a;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__excerpt {
    margin: 0 0 20px;

    color: #64748b;

    font-size: 14px;
    line-height: 2;
}

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #2563eb;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

.blog-card__link span {
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card__link span {
    transform: translateX(-4px);
}


/* ----------------------------------------
   Pagination
---------------------------------------- */

.blog-pagination {
    margin-top: 60px;

    display: flex;
    justify-content: center;
}

.blog-pagination ul {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    list-style: none;
}

.blog-pagination li {
    margin: 0;
}

.blog-pagination a,
.blog-pagination span {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;
    color: #475569;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.blog-pagination a:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.blog-pagination .current {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}


/* ----------------------------------------
   Empty
---------------------------------------- */

.blog-empty {
    padding: 90px 20px;

    text-align: center;

    border: 1px dashed #cbd5e1;
    border-radius: 24px;
}

.blog-empty__icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;
    color: #2563eb;

    font-size: 28px;
}

.blog-empty h2 {
    margin: 0 0 10px;

    font-size: 24px;
    color: #0f172a;
}

.blog-empty p {
    margin: 0 0 24px;

    color: #64748b;

    line-height: 2;
}


/* ----------------------------------------
   Responsive
---------------------------------------- */

@media (max-width: 1024px) {

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

}


@media (max-width: 640px) {

    .blog-hero {
        padding: 65px 0 50px;
    }

    .blog-hero h1 {
        font-size: 34px;
    }

    .blog-hero p {
        font-size: 14px;
    }

    .blog-search {
        margin-bottom: 50px;
    }

    .blog-search__form {
        padding: 6px;
    }

    .blog-search__form input {
        height: 46px;

        padding: 0 12px;

        font-size: 13px;
    }

    .blog-search__form button {
        width: 46px;
        height: 46px;

        padding: 0;
    }

    .blog-search__form button span {
        display: none;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-card__content {
        padding: 20px;
    }

}

/* ========================================
   Learning Areas Page
======================================== */

.learning-areas-page {
    min-height: 100vh;
}


/* ----------------------------------------
   Hero
---------------------------------------- */

.learning-areas-hero {
    padding: 90px 0 70px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 235, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(99, 102, 241, 0.06),
            transparent 35%
        );
}

.learning-areas-hero__content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.learning-areas-hero h1 {
    margin: 18px 0 20px;

    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.35;
    font-weight: 800;

    color: #111827;
}

.learning-areas-hero p {
    max-width: 650px;

    margin: 0 auto;

    color: #64748b;

    font-size: 17px;
    line-height: 2;
}


/* ----------------------------------------
   Grid
---------------------------------------- */

.learning-areas-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}


/* ----------------------------------------
   Card
---------------------------------------- */

.learning-area-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.learning-area-card:hover {
    transform: translateY(-6px);

    border-color: rgba(37, 99, 235, 0.2);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}

.learning-area-card__link {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 28px;

    color: inherit;

    text-decoration: none;
}


/* ----------------------------------------
   Top
---------------------------------------- */

.learning-area-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 35px;
}

.learning-area-card__number {
    color: #94a3b8;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.learning-area-card__icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    color: #2563eb;

    font-size: 22px;
    font-weight: 800;
}

.learning-area-card__icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ----------------------------------------
   Content
---------------------------------------- */

.learning-area-card__content {
    flex: 1;
}

.learning-area-card__content h3 {
    margin: 0 0 12px;

    font-size: 23px;
    line-height: 1.5;
    font-weight: 800;

    color: #0f172a;
}

.learning-area-card__content p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 2;
}


/* ----------------------------------------
   Footer
---------------------------------------- */

.learning-area-card__footer {
    margin-top: 30px;

    padding-top: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #f1f5f9;

    color: #2563eb;

    font-size: 14px;
    font-weight: 700;
}

.learning-area-card__arrow {
    font-size: 18px;

    transition:
        transform 0.2s ease;
}

.learning-area-card:hover .learning-area-card__arrow {
    transform: translateX(-5px);
}


/* ----------------------------------------
   Pagination
---------------------------------------- */

.learning-areas-pagination {
    margin-top: 60px;

    display: flex;
    justify-content: center;
}

.learning-areas-pagination ul {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    list-style: none;
}

.learning-areas-pagination li {
    margin: 0;
}

.learning-areas-pagination a,
.learning-areas-pagination span {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;
    color: #475569;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

.learning-areas-pagination a:hover {
    border-color: #2563eb;

    background: #eff6ff;

    color: #2563eb;
}

.learning-areas-pagination .current {
    border-color: #2563eb;

    background: #2563eb;

    color: #ffffff;
}


/* ----------------------------------------
   Empty
---------------------------------------- */

.learning-areas-empty {
    padding: 90px 20px;

    text-align: center;

    border: 1px dashed #cbd5e1;
    border-radius: 24px;
}

.learning-areas-empty__icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;
    color: #2563eb;

    font-size: 26px;
}

.learning-areas-empty h2 {
    margin: 0 0 10px;

    font-size: 24px;

    color: #0f172a;
}

.learning-areas-empty p {
    margin: 0;

    color: #64748b;

    line-height: 2;
}


/* ----------------------------------------
   Responsive
---------------------------------------- */

@media (max-width: 1024px) {

    .learning-areas-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 640px) {

    .learning-areas-hero {
        padding: 65px 0 50px;
    }

    .learning-areas-hero h1 {
        font-size: 34px;
    }

    .learning-areas-hero p {
        font-size: 14px;
    }

    .learning-areas-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .learning-area-card__link {
        padding: 22px;
    }

}

/* ========================================
   Learning Areas Search
======================================== */

.learning-areas-search {
    margin-bottom: 70px;
}

.learning-areas-search__form {
    max-width: 760px;

    margin: 0 auto;

    padding: 8px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.06);
}

.learning-areas-search__form input {
    flex: 1;

    min-width: 0;

    height: 52px;

    padding: 0 18px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #0f172a;

    font-family: inherit;
    font-size: 15px;
}

.learning-areas-search__form input::placeholder {
    color: #94a3b8;
}

.learning-areas-search__form button {
    flex-shrink: 0;

    height: 52px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    border-radius: 12px;

    background: #2563eb;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.learning-areas-search__form button:hover {
    background: #1d4ed8;

    transform: translateY(-1px);
}


/* Mobile */

@media (max-width: 640px) {

    .learning-areas-search {
        margin-bottom: 50px;
    }

    .learning-areas-search__form {
        padding: 6px;
    }

    .learning-areas-search__form input {
        height: 46px;

        padding: 0 12px;

        font-size: 13px;
    }

    .learning-areas-search__form button {
        width: 46px;
        height: 46px;

        padding: 0;
    }

    .learning-areas-search__form button span {
        display: none;
    }

}

/* ========================================
   Learning Paths Page
======================================== */

.learning-paths-page {
    min-height: 100vh;
}


/* ----------------------------------------
   Hero
---------------------------------------- */

.learning-paths-hero {
    padding: 90px 0 70px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 235, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(99, 102, 241, 0.06),
            transparent 35%
        );
}

.learning-paths-hero__content {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.learning-paths-hero h1 {
    margin: 18px 0 20px;

    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.35;
    font-weight: 800;

    color: #111827;
}

.learning-paths-hero p {
    max-width: 680px;

    margin: 0 auto;

    color: #64748b;

    font-size: 17px;
    line-height: 2;
}


/* ----------------------------------------
   Search
---------------------------------------- */

.learning-paths-search {
    margin-bottom: 70px;
}

.learning-paths-search__form {
    max-width: 760px;

    margin: 0 auto;

    padding: 8px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.06);
}

.learning-paths-search__form input {
    flex: 1;

    min-width: 0;

    height: 52px;

    padding: 0 18px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #0f172a;

    font-family: inherit;
    font-size: 15px;
}

.learning-paths-search__form input::placeholder {
    color: #94a3b8;
}

.learning-paths-search__form button {
    flex-shrink: 0;

    height: 52px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    border-radius: 12px;

    background: #2563eb;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.learning-paths-search__form button:hover {
    background: #1d4ed8;

    transform: translateY(-1px);
}


/* ----------------------------------------
   Grid
---------------------------------------- */

.learning-paths-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}


/* ----------------------------------------
   Card
---------------------------------------- */

.learning-path-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.learning-path-card:hover {
    transform: translateY(-6px);

    border-color: rgba(37, 99, 235, 0.2);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}

.learning-path-card__link {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 28px;

    color: inherit;

    text-decoration: none;
}


/* ----------------------------------------
   Top
---------------------------------------- */

.learning-path-card__top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 35px;
}

.learning-path-card__number {
    color: #94a3b8;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.08em;
}


/* Image */

.learning-path-card__image {
    width: 58px;
    height: 58px;

    overflow: hidden;

    border-radius: 16px;

    background: #eff6ff;
}

.learning-path-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* Placeholder */

.learning-path-card__icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    color: #2563eb;

    font-size: 23px;
    font-weight: 800;
}


/* ----------------------------------------
   Content
---------------------------------------- */

.learning-path-card__content {
    flex: 1;
}

.learning-path-card__content h3 {
    margin: 0 0 12px;

    font-size: 23px;
    line-height: 1.5;
    font-weight: 800;

    color: #0f172a;
}

.learning-path-card__content p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 2;
}


/* ----------------------------------------
   Footer
---------------------------------------- */

.learning-path-card__footer {
    margin-top: 30px;

    padding-top: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #f1f5f9;

    color: #2563eb;

    font-size: 14px;
    font-weight: 700;
}

.learning-path-card__arrow {
    font-size: 18px;

    transition:
        transform 0.2s ease;
}

.learning-path-card:hover
.learning-path-card__arrow {
    transform: translateX(-5px);
}


/* ----------------------------------------
   Pagination
---------------------------------------- */

.learning-paths-pagination {
    margin-top: 60px;

    display: flex;
    justify-content: center;
}

.learning-paths-pagination ul {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    list-style: none;
}

.learning-paths-pagination li {
    margin: 0;
}

.learning-paths-pagination a,
.learning-paths-pagination span {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #ffffff;
    color: #475569;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}

.learning-paths-pagination a:hover {
    border-color: #2563eb;

    background: #eff6ff;

    color: #2563eb;
}

.learning-paths-pagination .current {
    border-color: #2563eb;

    background: #2563eb;

    color: #ffffff;
}


/* ----------------------------------------
   Empty
---------------------------------------- */

.learning-paths-empty {
    padding: 90px 20px;

    text-align: center;

    border: 1px dashed #cbd5e1;
    border-radius: 24px;
}

.learning-paths-empty__icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;
    color: #2563eb;

    font-size: 26px;
}

.learning-paths-empty h2 {
    margin: 0 0 10px;

    font-size: 24px;

    color: #0f172a;
}

.learning-paths-empty p {
    margin: 0;

    color: #64748b;

    line-height: 2;
}


/* ----------------------------------------
   Responsive
---------------------------------------- */

@media (max-width: 1024px) {

    .learning-paths-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 640px) {

    .learning-paths-hero {
        padding: 65px 0 50px;
    }

    .learning-paths-hero h1 {
        font-size: 34px;
    }

    .learning-paths-hero p {
        font-size: 14px;
    }

    .learning-paths-search {
        margin-bottom: 50px;
    }

    .learning-paths-search__form {
        padding: 6px;
    }

    .learning-paths-search__form input {
        height: 46px;

        padding: 0 12px;

        font-size: 13px;
    }

    .learning-paths-search__form button {
        width: 46px;
        height: 46px;

        padding: 0;
    }

    .learning-paths-search__form button span {
        display: none;
    }

    .learning-paths-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .learning-path-card__link {
        padding: 22px;
    }

}