/* Cursos design polish — shared CSS loaded via functions.php enqueue.
 * Covers trust-stats strip, rating chips, and misc fixes that don't fit the minified theme.
 */

/* ---------- Trust stats strip ---------- */
.trust-stats {
    background-color: #f2f9fa;
    border-block: 1px solid #d4e1e5;
    padding: 36px 0;
    margin-bottom: 40px;
}

.trust-stats__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1024px) {
    .trust-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

@media only screen and (max-width: 480px) {
    .trust-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

.trust-stats__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.trust-stats__number {
    font-family: Outfit, sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #16b585;
    line-height: 1.1;
}

@media only screen and (max-width: 1024px) {
    .trust-stats__number {
        font-size: 30px;
    }
}

.trust-stats__label {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #495d5d;
    font-weight: 500;
    line-height: 1.3;
}

/* ---------- Course card rating chip ---------- */
.courses__item--rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 8px;
    background: #fff8e1;
    border-radius: 6px;
    font-family: Outfit, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #495d5d;
    width: fit-content;
}

.courses__item--rating .star {
    color: #ffb703;
    font-size: 14px;
    line-height: 1;
}

.courses__item--rating .count {
    color: #7d949a;
    font-weight: 400;
}

/* ============================================================
   Native share buttons (replaces Sassy Social Share)
   ============================================================ */
.share-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f6;
    color: #2a4754;
    text-decoration: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
    position: relative;
}

.share-btn:hover,
.share-btn:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
}

.share-btn:focus-visible {
    outline: 2px solid #16b585;
    outline-offset: 2px;
}

.share-btn svg {
    display: block;
}

.share-btn--linkedin:hover { background: #0a66c2; color: #fff; }
.share-btn--twitter:hover  { background: #000;     color: #fff; }
.share-btn--whatsapp:hover { background: #25d366;  color: #fff; }
.share-btn--facebook:hover { background: #1877f2;  color: #fff; }
.share-btn--copy:hover     { background: #16b585;  color: #fff; }

.share-btn--copy {
    background: #f1f5f6;
    color: #2a4754;
}

.share-btn__tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2d36;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.share-btn--copy.is-copied .share-btn__tooltip {
    opacity: 1;
}

/* Hide any stray Sassy markup if the plugin briefly re-activates */
.heateor_sss_sharing_container { display: none !important; }

/* ============================================================
   Homepage hero — match BR site spec (font-size 35px)
   The only US-vs-BR difference was the title was set to 52px on US.
   Reverting to BR's 35px matches the working design.
   ============================================================ */
.head-section__title {
    font-size: 35px;
}

/* Pull green slash slightly left (was 44% top / 59% bottom in frontend.css) */
.head-section:after {
    clip-path: polygon(0 0, 38% 0, 53% 100%, 0 100%);
}

/* Bigger hero photo + slash meets photo cleanly (no white gap) */
.head-section img {
    width: 72%;
}
.head-section:after {
    /* photo left edge sits at 35%; slash top now at 35% so they touch */
    clip-path: polygon(0 0, 28% 0, 43% 100%, 0 100%);
}

/* Push search box a little lower (was gap: 44px between title and search) */
.head-section .container {
    gap: 80px;
}