/* ====================================================================
   Curso Específica — página de detalhe de curso
   ==================================================================== */

/* ==============================
   Layout geral da página
   ============================== */

.ce-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--semantics-spacing-massive); /* 120px */
    width: 100%;
}

.ce-top {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ce-cover {
    width: 100%;
    overflow: hidden;
}

.ce-cover__img {
    display: block;
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.ce-inner {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-vast); /* 80px */
    align-items: flex-start;
    width: 100%;
    max-width: 1381px;
    align-self: center;
    margin-top: -48px;
    position: relative;
    z-index: 1;
}

/* ==============================
   Hero
   ============================== */

.ce-hero-wrap {
    padding: 0 var(--semantics-padding-large); /* 0 16px */
    width: 100%;
}

.ce-hero {
    background-color: var(--semantics-colors-fill-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--semantics-padding-wider) 0; /* 64px 0 */
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
}

.ce-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--semantics-spacing-larger); /* 20px */
    padding: 0 var(--semantics-padding-large); /* 0 16px */
    overflow: hidden;
}

.ce-hero__tags {
    display: flex;
    gap: var(--semantics-spacing-small); /* 8px */
    align-items: flex-start;
}

.ce-hero__title {
    color: var(--semantics-colors-text-on-dark);
    text-align: center;
    max-width: 1002px;
}

/* ==============================
   Layout de conteúdo: coluna esquerda + sidebar
   ============================== */

.ce-content-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--semantics-padding-large); /* 0 16px */
    width: 100%;
}

.ce-layout {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    max-width: 1334px;
}

/* ==============================
   Coluna esquerda (main)
   ============================== */

.ce-main {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-broad); /* 64px */
    align-items: flex-start;
    flex: 1;
    max-width: 768px;
}

/* --- Sobre o curso --- */

.ce-about {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-wide); /* 40px */
    align-items: flex-start;
    width: 100%;
}

.ce-about__heading {
    color: var(--semantics-colors-text-heading-default);
    width: 100%;
}

.ce-about__body {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    letter-spacing: var(--semantics-typography-tracking-none);
    color: var(--semantics-colors-text-primary);
    width: 100%;
}

.ce-about__body p + p {
    margin-top: var(--semantics-spacing-bigger); /* 24px — 1 linha de espaçamento (16px × 1.5) */
}

/* --- Turmas --- */

.ce-turmas {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-wide); /* 40px */
    align-items: flex-start;
    width: 100%;
}

.ce-turmas__heading {
    color: var(--semantics-colors-text-heading-default);
    width: 100%;
}

.ce-city-list {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-wider); /* 48px */
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
}

/* --- Grupo de cidade --- */

.ce-city-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
}

.ce-city-header {
    display: flex;
    gap: var(--semantics-spacing-medium); /* 12px */
    align-items: center;
    overflow: hidden;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--semantics-colors-stroke-primary);
    width: 100%;
}

.ce-city-header__icon {
    font-size: 20px;
    color: var(--semantics-colors-text-accent-petunia);
    flex-shrink: 0;
    line-height: 1;
}

.ce-city-header__name {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-bold);
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-normal);
    letter-spacing: var(--semantics-typography-tracking-none);
    color: var(--semantics-colors-text-accent-petunia);
    flex: 1;
}

.ce-city-header__count {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-14);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    white-space: nowrap;
}

/* --- Turma item --- */

.ce-turma {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-larger); /* 20px */
    align-items: flex-start;
    overflow: hidden;
    padding-top: var(--semantics-padding-large); /* 16px */
    padding-bottom: var(--semantics-padding-large); /* 16px */
    width: 100%;
}

.ce-turma--divider {
    border-bottom: 1px dashed var(--semantics-colors-stroke-secondary);
    padding-bottom: 17px;
}

.ce-turma__top {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-tiny); /* 4px */
    align-items: flex-start;
    width: 100%;
}

.ce-turma__header {
    display: flex;
    gap: var(--semantics-spacing-medium); /* 12px */
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.ce-turma__name {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-semibold);
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-primary);
    flex: 1;
}

.ce-turma__address {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-14);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    width: 100%;
}

.ce-turma__info {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-tiny); /* 4px */
    align-items: flex-start;
    overflow: hidden;
    padding: var(--semantics-padding-tiny) 0; /* 4px 0 */
    width: 100%;
}

.ce-turma__info p {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-14);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-primary);
    width: 100%;
}

.ce-turma__info strong {
    font-weight: var(--semantics-typography-weight-bold);
}

/* ==============================
   Sidebar — card de informações
   ============================== */

.ce-sidebar {
    flex-shrink: 0;
    width: 416px;
}

.ce-info-card {
    background-color: var(--semantics-colors-fill-background-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    border-radius: var(--semantics-radius-larger); /* 16px */
    box-shadow: var(--semantics-shadow-petunia-4);
    width: 100%;
	position: sticky;
    top: 130px;
}

.ce-info-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-large); /* 16px */
    align-items: flex-start;
    overflow: hidden;
    padding: var(--semantics-padding-larger); /* 24px */
    width: 100%;
}

.ce-info-card__title {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-bold);
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-accent-purpura);
    width: 100%;
}

.ce-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-small); /* 8px */
    align-items: flex-start;
    overflow: hidden;
    width: 100%;
    list-style: none;
}

.ce-info-item {
    display: flex;
    gap: var(--semantics-spacing-small); /* 8px */
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.ce-info-item__icon {
    font-size: 20px;
    color: var(--semantics-colors-text-secondary);
    flex-shrink: 0;
    line-height: 1;
}

.ce-info-item span {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-14);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-secondary);
    flex: 1;
}

.ce-info-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-medium); /* 12px */
    align-items: flex-start;
    overflow: hidden;
    padding: 0 var(--semantics-padding-larger) var(--semantics-padding-larger); /* 0 24px 24px */
    width: 100%;
}

.ce-info-card__btn {
    width: 100%;
    text-decoration: none;
}

.ce-info-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px 0;
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-semibold);
    font-size: var(--semantics-typography-label-12);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-interactive-link-default);
    text-decoration: underline;
    white-space: nowrap;
}

.ce-info-card__link:hover {
    color: var(--semantics-colors-text-interactive-link-hover);
}

/* ==============================
   Responsivo — ≤1024px
   ============================== */

@media (max-width: 1024px) {
    .ce-layout {
        flex-direction: column;
        gap: var(--semantics-spacing-wide); /* 40px */
    }

    .ce-sidebar {
        order: -1;
        width: 100%;
    }
	
	.ce-info-card {
		position: unset;
	}

    .ce-main {
        max-width: 100%;
        width: 100%;
    }

    /* Especificidade dupla (.pai .filho) para vencer typography.css carregado depois */
    .ce-hero .ce-hero__title {
        font-size: var(--semantics-typography-heading-large); /* 32px */
    }

    .ce-about .ce-about__heading {
        font-size: var(--semantics-typography-heading-medium); /* 28px */
    }

    .ce-turmas .ce-turmas__heading {
        font-size: var(--semantics-typography-heading-x-small); /* 20px */
    }

    .ce-cta .ce-cta__title {
        font-size: var(--semantics-typography-heading-large); /* 32px */
    }
}

@media (max-width: 576px) {
    .ce-hero .ce-hero__title {
        font-size: var(--semantics-typography-heading-medium); /* 28px */
    }

    .ce-about .ce-about__heading {
        font-size: var(--semantics-typography-heading-small); /* 24px */
    }

    .ce-turmas .ce-turmas__heading {
        font-size: var(--semantics-typography-heading-x-small); /* 20px */
    }

    .ce-cta .ce-cta__title {
        font-size: var(--semantics-typography-heading-medium); /* 28px */
    }
}

/* ==============================
   CTA section
   ============================== */

.ce-cta {
    background-color: var(--semantics-colors-fill-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--semantics-padding-broad); /* 80px */
    width: 100%;
}

.ce-cta__inner {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-wider); /* 48px */
    align-items: center;
    justify-content: center;
    padding: 0 var(--semantics-padding-large); /* 0 16px */
    width: 100%;
    max-width: 1381px;
}

.ce-cta__header {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-large); /* 16px */
    align-items: center;
    justify-content: center;
    padding: 0 var(--semantics-padding-large); /* 0 16px */
    width: 100%;
}

.ce-cta__title {
    color: var(--semantics-colors-text-on-dark);
    text-align: center;
}

.ce-cta__form.fillout-form {
    width: 670px;
    display: block;
    max-width: 100%;
    height: 100%;
    min-height: 1046px;
	position: relative;
}

.ce-cta__form.fillout-form > div {
    position: absolute !important;
	border-radius: 16px;
}