/* =========================================================
   LEARN — Our Businesses page styles
   Loads AFTER home.css — inherits all tokens, nav, footer,
   buttons, section head, typography.
   ========================================================= */

/* ---------- HERO ---------- */
.lc-biz-hero {
    position: relative;
    padding: 160px var(--gutter) 60px;
    overflow: visible;
    background-color: #e9f2fb;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(244,249,253,0.7) 40%, rgba(233,242,251,0.82) 100%),
        url("../images/about-office-3.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.lc-biz-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 60%, #fff 100%);
    z-index: 1;
    pointer-events: none;
}
.lc-biz-hero__orb {
    position: absolute;
    width: 520px; height: 520px;
    left: -120px; top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.8;
    animation: lcFloat 16s var(--ease) infinite alternate;
    z-index: 0;
    pointer-events: none;
}
.lc-biz-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.lc-biz-hero__copy { display: block; }
.lc-biz-hero .lc-eyebrow {
    margin-left: auto;
    margin-right: auto;
}
.lc-biz-hero__title {
    font-family: var(--font-display);
    font-size: var(--hero-title-size) !important;
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin: 24px 0 28px;
    color: var(--ink);
}
/* Override the default slide-from-left for this title — use fade-up
   (rise from below) so the headline floats into place. */
.lc-home [data-reveal-slide].lc-biz-hero__title {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.lc-home [data-reveal-slide].lc-biz-hero__title.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .lc-home [data-reveal-slide].lc-biz-hero__title {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
.lc-biz-hero__title .lc-accent { color: var(--brand); }
.lc-biz-hero__lead {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 56px);
    font-size: clamp(15.3px, 1.3vw, 18px);
    color: var(--ink-soft);
    line-height: 1.75;
}
/* Belief line — pulled out of the lead onto its own line and emphasised */
.lc-biz-hero__belief {
    max-width: 980px;
    margin: 28px auto 0;
    font-family: var(--font-display);
    font-size: clamp(19.8px, 2.3vw, 30.6px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--brand);
}

/* Visual block overlapping into the next section */
.lc-biz-hero__visual {
    position: relative;
    z-index: 3;
    max-width: 576px;
    margin: 64px auto 0;
    /* Push half of the image into the next section */
    margin-bottom: -18%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Static — no entrance spin/zoom, no continuous float. */
.lc-home [data-reveal].lc-biz-hero__visual {
    opacity: 1;
    transform: none;
    transition: none;
}
.lc-home [data-reveal].lc-biz-hero__visual.is-in img {
    animation: none;
}
.lc-biz-hero__visual-circle { display: none; }
.lc-biz-hero__visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* The first segment after hero needs extra top padding so the circle
   image visually overlaps onto its background without crowding content. */
.lc-biz-hero + .lc-segment { padding-top: 280px; }

@media (max-width: 900px) {
    .lc-biz-hero__visual { max-width: 480px; margin-bottom: -16%; }
    .lc-biz-hero + .lc-segment { padding-top: 200px; }
}
@media (max-width: 600px) {
    .lc-biz-hero__visual { max-width: 360px; margin-bottom: -14%; }
    .lc-biz-hero + .lc-segment { padding-top: 140px; }
}

/* ---------- SEGMENT SECTIONS ---------- */
.lc-segment {
    position: relative;
    padding: 60px 0 0 0;
    overflow: hidden;
    /* Offset the fixed nav so anchor jumps (#modern-school, #chain-school,
       #professional-skills) from the mega menu don't land under the nav bar. */
    scroll-margin-top: 96px;
}
.lc-segment + .lc-segment { border-top: 1px solid var(--line); }
.lc-segment:nth-of-type(odd)  { background: var(--paper); }
.lc-segment:nth-of-type(even) { background: var(--paper-2); }

.lc-segment__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
@media (max-width: 900px) {
    .lc-segment__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Alternating image side */
.lc-segment--flip .lc-segment__media { order: 2; }
.lc-segment--flip .lc-segment__body  { order: 1; }
@media (max-width: 900px) {
    .lc-segment--flip .lc-segment__media { order: 0; }
    .lc-segment--flip .lc-segment__body  { order: 1; }
}

.lc-segment__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #e5edf5;
    box-shadow: var(--shadow-md);
}
.lc-segment__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.9s var(--ease);
}
.lc-segment:hover .lc-segment__media img { transform: scale(1.04); }
.lc-segment__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, transparent 50%, rgba(40,121,185,0.18) 100%);
    z-index: 1;
    pointer-events: none;
}

.lc-segment__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(40,121,185,0.1);
    color: var(--brand);
    font-family: var(--font-display);
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.lc-segment__title {
    font-family: var(--font-display);
    font-size: clamp(28.8px, 3.6vw, 50.4px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 14px;
}
.lc-segment__sub {
    font-family: var(--font-display);
    font-size: clamp(14.4px, 1.2vw, 17.1px);
    font-weight: 600;
    color: var(--brand);
    margin: 0 0 22px;
    line-height: 1.5;
}
.lc-segment__body {
    /* container */
}
.lc-segment__body p {
    margin: 0 0 28px;
    font-size: 14.4px;
    line-height: 1.75;
    color: var(--ink-soft);
}

/* Split layout — body text on the left, logo grid on the right.
   Used by Modern School where the logo column is the visual feature. */
.lc-segment--split .lc-segment__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 56px;
}
.lc-segment--split .lc-segment__body { padding-top: 8px; }
@media (max-width: 900px) {
    .lc-segment--split .lc-segment__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Brand logo grid */
.lc-segment__brands {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 20px;
    margin: 0 0 32px;
    list-style: none;
    padding: 0;
}
/* In a split layout the brand column is narrower — drop to 3 across.
   Keep a bottom margin so the last logo row (e.g. Modern School's lone
   "Mastery School" card) never sits flush against the next segment. */
.lc-segment--split .lc-segment__brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 40px;
}
@media (max-width: 1100px) {
    .lc-segment__brands { grid-template-columns: repeat(3, 1fr); }
    .lc-segment--split .lc-segment__brands { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .lc-segment__brands,
    .lc-segment--split .lc-segment__brands { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
}
.lc-segment__brands li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Top-align every item within its grid row so that when one caption wraps
       to two lines (taller card), the neighbouring logos in the same row keep
       their logo plates aligned at the top instead of floating to center. */
    align-self: start;
}
.lc-segment__brands a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
/* Uniform logo plate: every brand logo sits centered inside an equal-sized
   white card so logos of differing native dimensions all read the same size. */
.lc-segment__brands figure {
    margin: 0;
    width: 100%;
    aspect-ratio: 5 / 3;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5.6px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(15, 33, 51, 0.04);
    display: grid;
    place-items: center;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.lc-segment__brands figure img {
    /* Every logo occupies an identical box (same width AND height) and is
       centered inside it via object-fit: contain — so wide, square, and tall
       logos (e.g. Appa) all render at the same footprint. The card padding
       adds the surrounding whitespace. */
    width: 100%;
    height: 56px;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s var(--ease);
}
.lc-segment__brands li:hover figure {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 33, 51, 0.1);
    border-color: rgba(40, 121, 185, 0.35);
}
.lc-segment__brands li:hover figure img { transform: scale(1.04); }
/* Brand name below the logo (Thai on TH pages, English on EN pages) */
.lc-segment__brands figcaption {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--brand);
    letter-spacing: 0.01em;
}
.lc-segment__brands li:hover figcaption { color: var(--brand); }

/* Big index number watermark */
.lc-segment__index {
    position: absolute;
    top: 60px;
    right: 4%;
    font-family: var(--font-display);
    font-size: clamp(108px, 14.4vw, 252px);
    font-weight: 200;
    letter-spacing: -0.06em;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(40,121,185,0.3);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.lc-segment--flip .lc-segment__index {
    right: auto;
    left: 4%;
}
/* Modern School (split layout) — pin index to the right side */
#modern-school .lc-segment__index {
    left: auto;
    right: 4%;
}
/* Soft white-to-transparent gradient at the top of Modern School to
   ease the visual transition from the hero (3Seg.svg overlap above). */
#modern-school::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 280px;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 0;
}
@supports not ((-webkit-text-stroke: 1px currentColor)) {
    .lc-segment__index { color: rgba(40,121,185,0.3); }
}
@media (max-width: 900px) {
    .lc-segment__index { top: 30px; font-size: 108px; opacity: 0.6; }
}
.lc-segment__inner > * { position: relative; z-index: 1; }

/* Inline decorative image inside a segment body — sits below the copy */
.lc-segment__inline-img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 32px 0 0;
}

/* ---------- JOIN US (dark gradient card, mirrors impact CTA) ---------- */
.lc-biz-join {
    padding: 0 var(--gutter) 120px;
    background: var(--paper);
}
.lc-biz-join__inner {
    max-width: 1100px;
    margin: 0 auto;
    min-height: 480px;
    padding: 80px clamp(32px, 6vw, 96px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(700px 500px at 80% 20%, rgba(122,195,234,0.22), transparent 60%),
        linear-gradient(135deg, #07335c 0%, var(--brand) 50%, var(--brand-3) 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.lc-biz-join__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}
.lc-biz-join__title {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(25.2px, 3.1vw, 43.2px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #fff;
    margin: 18px 0 20px;
}
.lc-biz-join__body {
    position: relative;
    max-width: 680px;
    margin: 0 auto 32px;
    color: rgba(255,255,255,0.88);
    font-size: 14.4px;
    line-height: 1.75;
}
.lc-biz-join__btns {
    position: relative;
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}