/* ============================================================
   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;
}

/* ============================================================
   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);
}

/* ============================================================
   "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;
}
.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;
}

/* The instructor portrait was framed for the Arabic (RTL) layout — image on
   the right, content on the left, so the instructor naturally faces the
   text. In LTR (English / Turkish) the column flips to the left side, which
   would otherwise leave the instructor looking AWAY from the content. Flip
   the image horizontally so the gaze always points toward the text. AND
   mirror the overlay quote to the opposite corner so it still sits over the
   open sky area (which is now on the left after the flip). */
body:not(.rtl) .about-instructor-section__image {
    transform: scaleX(-1);
}

/* The quote ALSO mirrors to the LEFT corner in LTR (only direction-
   specific override remaining — sizes/spacing are unified above). */
body:not(.rtl) .about-instructor-section__quote {
    right: auto;
    left: 12px;
    text-align: left;
}
body:not(.rtl) .about-instructor-section__quote::before {
    margin-left: 95px;
    margin-right: 0;
}

.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; }
}