/* =============================================================
   GAIA ABOUT US — Design System & Sections CSS
   ============================================================= */

:root {
  --g-primary:  #de5d2c;
  --g-dark:     #301303;
  --g-cream:    #fefae5;
  --g-gold:     #f5bd4c;
  --g-green:    #419059;
  --g-white:    #ffffff;
  --g-gray:     #6b7280;
  --g-border:   #e5e7eb;
}

#gaia2026-about * {
  box-sizing: border-box;
}

#gaia2026-about {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--g-dark);
  overflow-x: hidden;
  width: 100%;
  display: block;
}

/* Match the same slogan structure/style as /ben-vung/ */
#gaia2026-about .ga-story-banner.wtb2-orange-bar {
  background: #f26522;
  height: 66px;
  text-align: center;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gaia2026-about .ga-story-banner .gv-slogan-text {
  color: #fff;
  font-size: 35px;
  line-height: 1;
  font-weight: 700;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  text-transform: uppercase !important;
}

#gaia2026-about .ga-mission .ga-mission-heading,
#gaia2026-about .ga-mission h3.ga-mission-heading,
#gaia2026-about .ga-mission h3.ga-mission-heading[style] {
  font-family: 'Yanone Kaffeesatz', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Timeline Custom Lines */
.ga-timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

@media (max-width: 900px) {
    .ga-timeline-wrapper::before {
        display: none;
    }
}

/* Responsive fixes for flex layouts */
@media (max-width: 768px) {
    #gaia2026-about {
        --about-mobile-gutter: 22px;
    }

    #gaia2026-about,
    #gaia2026-about section,
    #gaia2026-about footer {
        max-width: 100%;
        overflow-x: hidden;
    }

    #gaia2026-about .g2-container,
    #gaia2026-about .ga-timeline > .g2-container,
    #gaia2026-about .ga-photobook > .g2-container,
    #gaia2026-about #ga-services > div,
    #gaia2026-about #g2-footer > .g2-footer-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--about-mobile-gutter) !important;
        padding-right: var(--about-mobile-gutter) !important;
        box-sizing: border-box !important;
    }

    #gaia2026-about h2,
    #gaia2026-about .g2-heading {
        font-size: clamp(34px, 11vw, 46px) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    #gaia2026-about h3 {
        font-size: 26px !important;
        line-height: 1.08 !important;
    }

    #gaia2026-about .ga-hero {
        min-height: 0 !important;
        height: clamp(300px, 48vw, 380px) !important;
        background-position: center 46% !important;
    }

    /* Match /ben-vung mobile orange-bar behavior */
    #gaia2026-about .ga-story-banner {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 16px !important;
        margin-bottom: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #gaia2026-about .ga-story-banner .gv-slogan-text {
        max-width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        font-size: 16px !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
    }

    .ga-story-content > div,
    .ga-mission > div,
    .ga-photobook > div.g2-container {
        flex-direction: column !important;
    }

    #gaia2026-about .ga-story-content > div,
    #gaia2026-about .ga-mission > div {
        flex-wrap: nowrap !important;
    }
    
    .ga-story-content > div > div,
    .ga-mission > div > div {
        flex: 1 1 100% !important;
        padding: 40px 24px !important;
        min-height: auto !important;
    }

    #gaia2026-about .ga-story-content > div > div,
    #gaia2026-about .ga-mission > div > div,
    #gaia2026-about .ga-photobook > div.g2-container > div {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #gaia2026-about .ga-story-content > div > div[style*="padding"],
    #gaia2026-about .ga-mission > div > div[style*="padding"] {
        padding: 40px var(--about-mobile-gutter) !important;
    }

    .ga-story-content img,
    .ga-mission img {
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        object-fit: cover !important;
    }

    #gaia2026-about .ga-story-content p,
    #gaia2026-about .ga-mission p {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    #gaia2026-about .ga-timeline {
        padding: 52px 0 !important;
    }

    #gaia2026-about .ga-timeline h2 {
        margin-bottom: 34px !important;
        text-align: center !important;
    }

    #gaia2026-about .ga-timeline-wrapper {
        position: relative !important;
    }

    #gaia2026-about .ga-timeline-wrapper::before,
    #gaia2026-about .ga-timeline-wrapper > div[style*="position: absolute"] {
        display: none !important;
    }

    #gaia2026-about .ga-timeline .ga-timeline-wrapper > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    #gaia2026-about .ga-timeline-item {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 0 16px !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.22) !important;
    }

    #gaia2026-about .ga-timeline-item:last-child {
        border-bottom: 0 !important;
    }

    #gaia2026-about .ga-timeline-item > div:first-child {
        grid-row: 1 / span 2 !important;
        width: 16px !important;
        height: 16px !important;
        margin: 5px 0 0 4px !important;
    }

    #gaia2026-about .ga-timeline-item > div:nth-child(2) {
        margin-bottom: 6px !important;
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    #gaia2026-about .ga-timeline-item > div:nth-child(3) {
        padding-right: 0 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    #gaia2026-about .ga-photobook {
        padding: 56px 0 !important;
    }

    .ga-photobook > div.g2-container > div {
        flex: 1 1 100% !important;
        padding-right: 0 !important;
        text-align: center;
    }

    #gaia2026-about .ga-photobook h2 {
        margin-bottom: 18px !important;
    }

    #gaia2026-about .ga-photobook p {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 28px !important;
    }
    
    .ga-photobook a {
        margin: 0 auto;
    }

    #gaia2026-about .ga-photobook a,
    #gaia2026-about #ga-services a {
        width: min(100%, 220px) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #gaia2026-about .ga-photobook img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    #gaia2026-about #ga-services {
        padding: 56px 0 !important;
    }

    #gaia2026-about #ga-services h2 {
        margin-bottom: 38px !important;
    }

    #gaia2026-about #ga-services .ga-services-grid {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
        margin-bottom: 36px !important;
    }

    #gaia2026-about #ga-services .ga-services-grid > div > div:first-child {
        width: min(190px, 62vw) !important;
        height: min(190px, 62vw) !important;
        margin-bottom: 16px !important;
    }

    #gaia2026-about #ga-services p {
        max-width: 100% !important;
    }

    #gaia2026-about .g2-cert-docs,
    #gaia2026-about .ga-certs-badges {
        overflow: hidden !important;
    }

    #gaia2026-about .g2-cert-docs img,
    #gaia2026-about .ga-certs-badges img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    #gaia2026-about #g2-footer .g2-footer-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding-top: 30px !important;
        padding-bottom: 32px !important;
    }

    #gaia2026-about #g2-footer p,
    #gaia2026-about #g2-footer a,
    #gaia2026-about #g2-footer li,
    #gaia2026-about #g2-footer div {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    #gaia2026-about #g2-footer .g2-footer-socials {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 430px) {
    #gaia2026-about {
        --about-mobile-gutter: 18px;
    }

    #gaia2026-about .ga-hero {
        min-height: 0 !important;
        height: 300px !important;
        background-position: center 42% !important;
    }

    #gaia2026-about .ga-story-content > div > div[style*="padding"],
    #gaia2026-about .ga-mission > div > div[style*="padding"] {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    #gaia2026-about .ga-story-content img,
    #gaia2026-about .ga-mission img {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    #gaia2026-about .ga-timeline,
    #gaia2026-about .ga-photobook,
    #gaia2026-about #ga-services {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    #gaia2026-about .ga-timeline-item {
        gap: 0 13px !important;
        padding: 16px 0 !important;
    }

    #gaia2026-about #ga-services .ga-services-grid > div > div:first-child {
        width: min(170px, 58vw) !important;
        height: min(170px, 58vw) !important;
    }
}

@media (max-width: 768px) {
    #gaia2026-about h3,
    #gaia2026-about h3[style] {
        font-size: 26px !important;
        line-height: 1.08 !important;
    }
}