/**
 * Page: About (Hakkımızda) section
 *
 * Template-level layout for all 12 about pages.
 * Component styles are handled by their own CSS files.
 *
 * @package Saha
 */

/* ----------------------------------------
   Main wrapper
   ---------------------------------------- */

.saha-about-main {
    --saha-container-padding: 40px;
    display: flex;
    flex-direction: column;
    gap: var(--saha-stack-sm);
    padding-bottom: 120px;
}

/* Hakkımızda: embed sayfası — prose → embed 47px, footer 120px */
.saha-about-main--with-embed {
    gap: 47px;
}

/* ----------------------------------------
   Prose container: live col-md-8 = 66.67%
   ---------------------------------------- */

.saha-about-main .saha-container--narrow {
    max-width: calc((100% - 80px) * 0.6667);
    padding-inline: 0;
}

/* ----------------------------------------
   Embed spacing (Hakkımızda page)
   ---------------------------------------- */

.saha-about-main > .saha-container {
    width: 100%;
}

.saha-about-main .saha-embed {
    margin-top: 0;
    border: 1px solid rgb(221, 221, 221);
    background-color: #f5f5f5;
}

/* ----------------------------------------
   Prose + organism spacing
   ---------------------------------------- */

.saha-about-main .saha-container--narrow + .saha-people-grid-section,
.saha-about-main .saha-container--narrow + .saha-logo-grid-section {
    margin-top: 0;
}

/* ----------------------------------------
   Supporter section titles (Studio Destekçileri)
   ---------------------------------------- */

.saha-supporter-section {
    display: flex;
    flex-direction: column;
    gap: var(--saha-stack-sm);
}

.saha-supporter-section__title {
    font-family: var(--saha-font-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 52px;
    letter-spacing: normal;
    color: var(--saha-color-text-primary);
    text-align: center;
    margin: 0;
}

/* ----------------------------------------
   SSS: FAQ dar container (live col-md-8)
   ---------------------------------------- */

.saha-about-main .saha-faq-section .saha-container {
    max-width: calc((100% - 80px) * 0.6667);
    padding-inline: 0;
}

/* ----------------------------------------
   Responsive: mobile
   ---------------------------------------- */

@media (max-width: 1024px) {
    .saha-about-main .saha-container--narrow {
        max-width: 100%;
        padding-inline: var(--saha-container-padding, 40px);
    }

    .saha-about-main .saha-faq-section .saha-container {
        max-width: 100%;
        padding-inline: var(--saha-container-padding, 40px);
    }
}

@media (max-width: 640px) {
    .saha-about-main {
        --saha-container-padding: 20px;
        padding-bottom: 60px;
    }
}