/* ============================================================
   about_instructor — landing builder component
   Two-column layout: instructor image full-height on the side
   (~33% width), centered content stack on the other side
   (title 2 lines, subtitle, musical separator, 3 cards,
   why-heading, 4 badges in a row, CTA).
   Light/Dark/RTL aware. Palette-driven.
   ============================================================ */

.about-instructor-section {
    position: relative;
    /* No padding here — spacing between components is handled by the
       vertical_spacer component between blocks. */
    overflow: hidden;
}

.about-instructor-section__row {
    position: relative;
    z-index: 1;
    align-items: stretch;
}

/* This theme ships NO Bootstrap order-* utilities, so set the desktop column
   order explicitly here: content first (→ RIGHT in RTL / LEFT in LTR), image
   second (→ LEFT in RTL / RIGHT in LTR). Below lg no order applies, so the DOM
   order wins (image is first → it stacks on TOP on mobile). */
@media (min-width: 992px) {
    .about-instructor-section__content   { order: 1; }
    .about-instructor-section__media-col { order: 2; }
}

/* ============================================================
   Content column — everything centered
   ============================================================ */
.about-instructor-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 16px 8px;
}

/* ---- Title (two lines) ----
   font-size uses clamp(min, fluid, max) so it scales smoothly with the
   viewport. The bounds are picked to comfortably fit the LONGEST
   translation (English / Turkish) without wrapping awkwardly, and the
   SAME rule applies to every language — no per-locale override. */
.about-instructor-section__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.1vw, 2.2rem);
    line-height: 1.22;
}
.about-instructor-section__title-line {
    display: block;
    color: var(--dark);
}
.about-instructor-section__title-line--accent {
    /* second line picks up the accent color tone, like in the reference */
    color: var(--primary);
}
body.dark-mode .about-instructor-section__title-line { color: #ffffff; }
body.dark-mode .about-instructor-section__title-line--accent { color: var(--accent); }
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__title-line {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(20, 0, 40, 0.30);
}
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__title-line--accent {
    color: #f1c87a;                  /* warm cream highlight on the wallpaper */
    text-shadow: 0 2px 8px rgba(20, 0, 40, 0.30);
}

/* ---- Subtitle (caption) ---- */
.about-instructor-section__subtitle {
    margin: 0;
    max-width: 640px;
    font-size: clamp(0.85rem, 0.95vw, 0.98rem);
    line-height: 1.6;
    color: var(--gray-500);
}
body.dark-mode .about-instructor-section__subtitle { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__subtitle {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(20, 0, 40, 0.22);
}

/* ---- Musical separator ---- */
.about-instructor-section__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    color: var(--primary);
    margin: 4px 0 4px;
}
.about-instructor-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;
}
.about-instructor-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 .about-instructor-section__separator,
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__separator {
    color: #f1c87a;
}

/* ============================================================
   Feature cards — palette + hover effect cloned from why_choose_us
   (lavender bg, primary border, lift hover). Icon size matches
   why_choose_us (72×72) but the rounded-square shape is preserved
   here — the diamond rotation belongs to why_choose_us only.
   Data order is reversed: title → description → icon at the bottom.
   ============================================================ */
.about-instructor-section__cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ai-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    /* Fixed height across every language. The font sizes below are
       calibrated so the LONGEST translation (English / Turkish) still
       fits inside this height — Arabic will sit slightly more loose,
       but the visual block size is identical in all locales. */
    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;
}
.ai-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(62, 0, 95, 0.16);
}
body.dark-mode .ai-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 .ai-card:hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.40);
}

/* ---- Card text — fluid sizing that fits every language's longest
       translation inside the fixed 280px card. Same rules for AR/EN/TR. */
.ai-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;
}
.ai-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 .ai-card__title { color: #ffffff; }
body.dark-mode .ai-card__description { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .ai-card__title { color: #6a0d7a; }
body.home-wallpaper-active:not(.dark-mode) .ai-card__description { color: #bd31d6; }

/* ---- Unified icon — fluid size that scales with the viewport so the
       cards/badges stay proportionally balanced on every screen, and
       identical across languages. ---- */
.ai-card__icon,
.ai-badge__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;
}
.ai-card__icon img,
.ai-badge__icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
body.dark-mode .ai-card__icon,
body.dark-mode .ai-badge__icon {
    box-shadow: 0 10px 24px rgba(180, 143, 255, 0.25);
}
/* On the home gradient the badges sit directly on the dark background (no card
   behind them), so a dark primary tile blends in — give them a bright magenta
   fill that pops. The card icons keep their primary tile (they sit on light cards). */
body.home-wallpaper-active:not(.dark-mode) .ai-badge__icon {
    background: linear-gradient(135deg, #c13fd8 0%, #7a1f96 100%);
    box-shadow: 0 10px 24px rgba(193, 63, 216, 0.35);
}

/* ============================================================
   "Why with the instructor?" heading
   ============================================================ */
.about-instructor-section__why-title {
    margin: 8px 0 0;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--dark);
}
body.dark-mode .about-instructor-section__why-title,
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__why-title {
    color: #ffffff;
}

/* ============================================================
   Badges — 4 in a row, NO surrounding box. Just label + icon
   stacked, separated by a short vertical line between siblings.
   Order is reversed (label on top, icon at the bottom).
   ============================================================ */
.about-instructor-section__badges {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;                          /* dividers replace the gap visually */
}

.ai-badge {
    position: relative;
    flex: 1 1 0;
    min-width: 140px;
    /* Fixed badge height — locked across all languages. The label
       font is sized so the longest translation still fits below the
       icon without wrapping the icon out of position. */
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Anchor the icon to the TOP of the badge (instead of centering),
       so every badge's icon sits at the EXACT same y-position no
       matter how long its label runs. The label below it grows
       downward into a fixed slot. */
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 12px 14px;
    overflow: hidden;
    background: transparent;
    border: 0;
    transition: transform .2s ease;
}
.ai-badge:hover {
    transform: translateY(-2px);
}

/* Short vertical divider between each badge (skip after the last). */
.ai-badge:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: var(--gray-300);
    opacity: 0.6;
}
body.dark-mode .ai-badge:not(:last-child)::after,
body.home-wallpaper-active:not(.dark-mode) .ai-badge:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.30);
}

.ai-badge__label {
    font-weight: 600;
    /* Small enough so the LONGEST translation (badge #1 in EN/TR) still
       fits inside the badge's remaining space below the icon — without
       pushing the icon out of its fixed top position. */
    font-size: clamp(0.7rem, 0.78vw, 0.82rem);
    line-height: 1.3;
    color: var(--dark);
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.dark-mode .ai-badge__label { color: #ffffff; }
body.home-wallpaper-active:not(.dark-mode) .ai-badge__label { color: #ffffff; }

/* ============================================================
   CTA button (centered)
   ============================================================ */
.about-instructor-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    border-radius: 100px;
    background: var(--primary);
    color: var(--primary-btn-color);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(62, 0, 95, 0.28);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    margin-top: 8px;
}
.about-instructor-section__cta:hover,
.about-instructor-section__cta:focus-visible {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: var(--primary-btn-color);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 107, 157, 0.32);
    outline: none;
}
/* Brighter fill so the button stands out on the dark home gradient (no shadow). */
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__cta,
body.home-wallpaper-active:not(.dark-mode) .about-instructor-section__cta:hover {
    background: linear-gradient(135deg, #c13fd8 0%, #7a1f96 100%);
    box-shadow: none;
    color: #ffffff;
}
.about-instructor-section__cta-arrow { width: 18px; height: 18px; }
.rtl .about-instructor-section__cta-arrow { transform: rotate(180deg); }

/* ============================================================
   Media column — full-height instructor image bleed-to-edge.
   The column cancels Bootstrap's gutter padding AND the section's
   72px vertical padding via negative margins, so the image fills
   the entire section from top to bottom edge. The pull-quote sits
   absolutely positioned on the top-right of the image.
   ============================================================ */
.about-instructor-section__media-col {
    display: flex;
    align-items: stretch;            /* image FILLS the column height — top
                                        of section to the bottom (CTA), so
                                        the visual is identical to the AR
                                        reference in every language. */
    padding-left: 0;                 /* drop Bootstrap col gutter so the
                                        image touches the column edge */
    padding-right: 0;
}
.about-instructor-section__media {
    position: relative;              /* anchor for the absolute quote */
    width: 100%;
    height: 100%;                    /* fills the stretched column */
}

.about-instructor-section__image {
    width: 100%;
    height: 100%;                    /* fills the wrapper which fills the column,
                                        so the image spans the FULL height of the
                                        section in every language. */
    object-fit: contain;             /* never crops the image — letterboxes
                                        with whitespace if the upload aspect
                                        differs from the slot. Upload at the
                                        recommended ~1:1.8 portrait ratio
                                        (e.g. 800 × 1440) for a flush fill. */
    object-position: center;
    display: block;
}

/* Image side is set purely by column order (left in RTL / right in LTR). The
   image itself is NEVER mirrored — no scaleX flip — per the design request. */

/* The image is never flipped, so the portrait's open-sky area stays top-right in
   both directions — the base quote position is correct for RTL and LTR alike,
   with no direction-specific override needed. */

.about-instructor-section__quote {
    position: absolute;
    top: 20px;
    right: 42px;                     /* nudged inward — away from the corner edge */
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 2;
    max-width: 45%;
    font-style: italic;
    font-size: clamp(0.975rem, 1.15vw, 1.125rem);
    line-height: 1.75;
    color: #ffffff;
    text-align: right;               /* right-aligned stacked phrases */
    text-shadow: 0 2px 6px rgba(20, 0, 40, 0.55);
    pointer-events: none;            /* don't block clicks on the image area */
}
.about-instructor-section__quote::before,
.about-instructor-section__quote::after {
    display: block;
    font-style: normal;
    font-size: 2rem;
    line-height: 0.5;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 6px rgba(20, 0, 40, 0.55);
}

/* Top quote — reversed horizontal: shrink the block from the START
   side (right in RTL), so the right-aligned glyph actually moves
   LEFT and lands after the last letter of "خبرة". Pushed down a bit
   so it doesn't sit so high above the first line. Animated. */
.about-instructor-section__quote::before {
    content: "\201D";
    position: relative;             /* break the margin-collapse trap that ate
                                       margin-top — uses physical offset so the
                                       glyph actually moves down on screen */
    top: 25px;
    margin-inline-start: 40px;      /* effective shift of right-aligned content */
    margin-inline-end: 0;
    animation: ai-quote-float 2.6s ease-in-out infinite;
    transform-origin: center;
}

/* Bottom quote — centered horizontally below the last line, with the
   same float animation as the top one, and a wider top gap so it
   doesn't kiss the last text line. */
.about-instructor-section__quote::after  {
    content: "\201D";
    margin-top: 18px;
    text-align: center;
    animation: ai-quote-float 2.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ai-quote-float {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(-3deg); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px) {
    .about-instructor-section__cards { gap: 12px; }
}

@media (max-width: 991px) {
    /* Image now sits FIRST in markup, so on mobile it naturally appears
       above the content — no flex-direction reverse needed. */

    /* On mobile the image stacks above content; restore the column
       gutter so it has a small visual breathing space from the content
       beneath. The component itself still has no padding — spacing is
       owned by the vertical_spacer between blocks. */
    .about-instructor-section__media-col {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 24px;
    }
    .about-instructor-section__cards {
        grid-template-columns: repeat(3, 1fr);  /* keep 3 portraits on tablet */
        gap: 12px;
    }
    .about-instructor-section__image { max-height: 420px; min-height: auto; }
    .about-instructor-section__separator { max-width: 360px; }
    .ai-card { min-height: 220px; padding: 22px 16px; }

    /* Badges wrap to a 2-row layout — hide the divider that would otherwise
       sit at the wrap break (every 2nd badge becomes the row's last child). */
    .ai-badge { min-width: 120px; flex-basis: 50%; padding: 14px 10px; }
    .ai-badge:nth-child(2n)::after { display: none; }
}

@media (max-width: 767px) {
    .about-instructor-section__cards { grid-template-columns: 1fr; gap: 12px; }
    .ai-card { min-height: 200px; }
    /* Stack badges vertically on small phones — drop the dividers entirely. */
    .ai-badge { flex-basis: 100%; }
    .ai-badge::after { display: none !important; }
}

@media (max-width: 575px) {
    .about-instructor-section__title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
    .ai-badge { padding: 12px 8px; }
    .ai-badge__label { font-size: 0.78rem; }
}