/* ============================================================
   curriculum_hero — Section 1 of the Structured Learning landing.
   Visual reference: Section 1.png + the existing about_instructor
   component. Card surface, icon tile, text colors, and separator
   accent all mirror .ai-card / .ai-badge for visual consistency
   across the landing.
   Light / Dark / wallpaper / RTL aware.
   ============================================================ */

.curriculum-hero-section {
    position: relative;
    overflow: hidden;
    padding: 32px 0;
}

/* ============================================================
   Layout — without an image the content column fills the row
   (original centered look). When a hero image is uploaded the
   section becomes two columns: image on one side, the whole
   content stack (title + description + separator + cards) on the
   other.

   The image is FIRST in the DOM, so flex-direction:row puts it on
   the START side automatically — right in RTL (Arabic), left in
   LTR (English / Turkish). No JS, no .rtl override needed.
   ============================================================ */
.curriculum-hero-section__layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.curriculum-hero-section__content-col {
    width: 100%;
}

.curriculum-hero-section--has-image .curriculum-hero-section__layout {
    flex-direction: row;
    align-items: stretch;             /* image col stretches to match content height */
    gap: clamp(20px, 3vw, 48px);
}
.curriculum-hero-section--has-image .curriculum-hero-section__image-col {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.curriculum-hero-section--has-image .curriculum-hero-section__image-col img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}
.curriculum-hero-section--has-image .curriculum-hero-section__content-col {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    text-align: center;
}
/* Title + description + separator stay centered inside the content
   column even in the two-column layout — the column itself sits on
   one side of the image, but each item is centered horizontally
   within the column. */
.curriculum-hero-section--has-image .curriculum-hero-section__title,
.curriculum-hero-section--has-image .curriculum-hero-section__description {
    text-align: center;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.curriculum-hero-section--has-image .curriculum-hero-section__separator {
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/* ============================================================
   Title (two lines) — accent line picks up the soft-pink wallpaper
   highlight (#f5d8ff) on the home wallpaper, the standard primary
   color on plain pages, and the accent token in dark mode.
   ============================================================ */
.curriculum-hero-section__title {
    margin: 0 0 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 800;
    font-size: clamp(1.6rem, 2.8vw, 2.6rem);
    line-height: 1.25;
}
.curriculum-hero-section__title-line {
    display: block;
    color: var(--dark);
}
.curriculum-hero-section__title-line--accent {
    color: var(--primary);
}
body.dark-mode .curriculum-hero-section__title-line { color: #ffffff; }
body.dark-mode .curriculum-hero-section__title-line--accent { color: var(--accent); }
body.home-wallpaper-active:not(.dark-mode) .curriculum-hero-section__title-line {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(20, 0, 40, 0.35);
}
body.home-wallpaper-active:not(.dark-mode) .curriculum-hero-section__title-line--accent {
    color: #f5d8ff;                  /* soft-pink wallpaper highlight */
    text-shadow: 0 2px 8px rgba(20, 0, 40, 0.35);
}

/* ---- Description ---- */
.curriculum-hero-section__description {
    margin: 0 auto 28px;
    max-width: 720px;
    text-align: center;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    color: var(--gray-500);
}
body.dark-mode .curriculum-hero-section__description { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .curriculum-hero-section__description {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(20, 0, 40, 0.22);
}

/* ============================================================
   Musical separator — gold accent on the wallpaper (matches the
   about_instructor + instrument_store separators), primary on
   plain pages.
   ============================================================ */
.curriculum-hero-section__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 36px;
    color: var(--primary);
}
.curriculum-hero-section__separator-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        currentColor 30%,
        currentColor 70%,
        transparent 100%
    );
    opacity: 0.6;
}
.curriculum-hero-section__separator-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-btn-color);
    box-shadow: 0 6px 16px rgba(62, 0, 95, 0.20);
}
body.dark-mode .curriculum-hero-section__separator,
body.home-wallpaper-active:not(.dark-mode) .curriculum-hero-section__separator {
    color: #f1c87a;                  /* gold accent — same token used by
                                        about_instructor / instrument_store
                                        for visual consistency across the landing */
}

/* ============================================================
   Feature cards — IDENTICAL surface, icon tile, and typography
   to .ai-card / .ai-badge in the about_instructor component.
   Lavender background, primary border, lift hover, primary-tile
   icon with white-rendered glyph.
   ============================================================ */
.curriculum-hero-section__cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    height: 280px;
    padding: 22px 16px;
    overflow: hidden;
    border: 1.5px solid var(--primary);
    border-radius: 24px;
    background: #fbdefcf8;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 16px 36px rgba(62, 0, 95, 0.10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(62, 0, 95, 0.16);
}
body.dark-mode .ch-card {
    background: rgba(31, 15, 51, 0.55);
    border-color: rgba(180, 143, 255, 0.65);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30);
}
body.dark-mode .ch-card:hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.40);
}

/* ---- Card text — same colors as .ai-card across all modes ---- */
.ch-card__title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw, 1.05rem);
    line-height: 1.3;
    color: var(--dark);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ch-card__description {
    margin: 0;
    font-size: clamp(0.75rem, 0.85vw, 0.88rem);
    line-height: 1.5;
    color: var(--gray-500);
    word-break: break-word;
    overflow-wrap: anywhere;
}
body.dark-mode .ch-card__title { color: #ffffff; }
body.dark-mode .ch-card__description { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .ch-card__title { color: #6a0d7a; }
body.home-wallpaper-active:not(.dark-mode) .ch-card__description { color: #bd31d6; }

/* ---- Icon — IDENTICAL primary-tile + white glyph as .ai-card__icon ---- */
.ch-card__icon {
    width: clamp(52px, 5vw, 72px);
    height: clamp(52px, 5vw, 72px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: clamp(14px, 1.4vw, 20px);
    box-shadow: 0 10px 24px rgba(62, 0, 95, 0.20);
    flex-shrink: 0;
}
.ch-card__icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
body.dark-mode .ch-card__icon {
    box-shadow: 0 10px 24px rgba(180, 143, 255, 0.25);
}

/* ============================================================
   Responsive — same four-breakpoint cascade used across the
   landing builder components (1199 / 991 / 767 / 575).
   ============================================================ */
@media (max-width: 1199px) {
    .curriculum-hero-section__cards { gap: 12px; }
}

@media (max-width: 991px) {
    .curriculum-hero-section__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .ch-card { height: 240px; padding: 18px 14px; }
    .curriculum-hero-section__separator { max-width: 360px; }
}

@media (max-width: 767px) {
    .curriculum-hero-section__cards { grid-template-columns: 1fr; gap: 12px; }
    .ch-card { height: auto; min-height: 200px; }

    /* Collapse the two-column layout back to a vertical stack on
       mobile so the illustration sits above the content instead of
       crowding it. */
    .curriculum-hero-section--has-image .curriculum-hero-section__layout {
        flex-direction: column;
        gap: 24px;
    }
    .curriculum-hero-section--has-image .curriculum-hero-section__image-col {
        flex: 0 0 auto;
        max-width: 70%;
        margin-inline: auto;
    }
    .curriculum-hero-section--has-image .curriculum-hero-section__content-col {
        text-align: center;
    }
    .curriculum-hero-section--has-image .curriculum-hero-section__title,
    .curriculum-hero-section--has-image .curriculum-hero-section__description {
        text-align: center;
    }
    .curriculum-hero-section--has-image .curriculum-hero-section__separator {
        margin-inline: auto;
    }
}

@media (max-width: 575px) {
    .curriculum-hero-section__title { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
}