/* =============================================
   PROMETOS — Sections
   File: assets/css/sections.css
   ============================================= */

/* --- Shared section layout --- */
.section__inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    padding: var(--inner-pad);
}

.section__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: 12px;
}

.section__headline {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-bright);
    margin-bottom: 16px;
}

.section__subtext {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-mid);
    max-width: 600px;
    margin-bottom: 48px;
}

/* =============================================
   Partners strip
   ============================================= */
.partners {
    padding: var(--section-pad);
    border-bottom: 1px solid var(--navy-border);
}

.partners__strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin-top: 24px;
}

.partners__item img {
    height: 28px;
    width: auto;
    opacity: 0.7;
    filter: grayscale(100%) brightness(2);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.partners__item img:hover {
    opacity: 1;
    filter: none;
}

.partners__placeholder {
    font-size: 14px;
    color: var(--text-muted);
}

/* =============================================
   Services
   ============================================= */
.services {
    padding: var(--section-pad);
    background: var(--navy-dark);
    border-bottom: 1px solid var(--navy-border);
}

.services__grid {
    display: grid;
    gap: 24px;
    margin-top: 48px;
    grid-template-columns: repeat(3, 1fr);
}

/* 1 card */
.services__grid:has(.service-card:only-child) {
    grid-template-columns: 1fr;
    max-width: 500px;
}

/* 2 cards */
.services__grid:has(.service-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

/* 4 cards */
.services__grid:has(.service-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

/* 5 cards */
.services__grid:has(.service-card:nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
}

.services__grid:has(.service-card:nth-child(5):last-child) .service-card:nth-child(4) {
    grid-column: 2 / 4;
}

.services__grid:has(.service-card:nth-child(5):last-child) .service-card:nth-child(5) {
    grid-column: 4 / 6;
}

.service-card {
    background: var(--navy-mid);
    border: 1px solid var(--navy-border);
    border-top: 3px solid var(--card-accent, var(--color-teal-dark));
    border-radius: 8px;
    padding: 32px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-accent, var(--color-teal-dark));
}

.service-card__title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 12px;
}

.service-card__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-mid);
    margin-bottom: 24px;
}

.service-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-card__list li {
    font-size: 13px;
    color: var(--text-muted);
    padding-left: 16px;
    position: relative;
}

.service-card__list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--card-accent, var(--color-teal-dark));
}

/* =============================================
   Case Studies
   ============================================= */
.cases {
    padding: var(--section-pad);
    border-bottom: 1px solid var(--navy-border);
}

.cases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.case-card {
    background: var(--navy-dark);
    border: 1px solid var(--navy-border);
    border-radius: 8px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease;
}

.case-card:hover {
    border-color: var(--color-teal-dark);
}

.case-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    align-self: flex-start;
}

.case-card__tag--teal { background: rgba(0, 161, 156, 0.15); color: var(--color-teal-dark); }
.case-card__tag--blue { background: rgba(34, 142, 194, 0.15); color: var(--color-blue); }
.case-card__tag--cyan { background: rgba(58, 192, 174, 0.15); color: var(--color-teal-light); }

.case-card__title {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.3;
}

.case-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-mid);
    flex: 1;
}

.case-card__outcome {
    font-size: 13px;
    font-weight: 600;
    padding-top: 12px;
    border-top: 1px solid var(--navy-border);
}

.case-card__outcome--teal { color: var(--color-teal-dark); }
.case-card__outcome--blue { color: var(--color-blue); }
.case-card__outcome--cyan { color: var(--color-teal-light); }

/* =============================================
   Why Us
   ============================================= */
.why {
    padding: var(--section-pad);
    background: var(--navy-dark);
    border-bottom: 1px solid var(--navy-border);
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2px;
    margin-top: 48px;
    background: var(--navy-border);
    border: 1px solid var(--navy-border);
    border-radius: 8px;
    overflow: hidden;
}

.why__item {
    background: var(--navy-mid);
    padding: 32px;
    transition: background 0.2s ease;
}

.why__item--active {
    background: var(--navy-dark);
    border-left: 3px solid var(--color-teal-light);
}

.why__title {
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 10px;
}

.why__item--active .why__title {
    color: var(--color-teal-light);
}

.why__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-mid);
}

/* =============================================
   CTA Band
   ============================================= */
.cta-band {
    padding: var(--section-pad);
    background: var(--navy-mid);
    border-bottom: 1px solid var(--navy-border);
    text-align: center;
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-band .section__headline {
    max-width: 600px;
}

.cta-band__subtext {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-mid);
    max-width: 520px;
    margin-bottom: 32px;
}

.cta-band .btn--primary {
    display: inline-block;
    background: var(--color-teal-light);
    color: var(--navy-deepest);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 4px;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.cta-band .btn--primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* =============================================
   Footer
   ============================================= */
#siteFooter {
    background: var(--navy-dark);
    border-top: 1px solid var(--navy-border);
    padding: 64px 0 0;
}

#siteFooter .container {
    max-width: var(--inner-width);
    margin: 0 auto;
    padding: var(--inner-pad);
}

.footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
}

.footer-logo img {
    max-height: 40px;
    width: auto;
    margin-bottom: 16px;
}

.footer-logo p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-menu nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu nav ul li a {
    font-size: 14px;
    color: var(--text-mid);
    transition: color 0.2s ease;
}

.footer-menu nav ul li a:hover {
    color: var(--color-teal-light);
}

.footer-contact p,
.footer-contact a {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.8;
    display: block;
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: var(--color-teal-light);
}

.footer-bottom {
    border-top: 1px solid var(--navy-border);
    padding: 24px 0;
}

.footer-bottom p {
    font-size: 13px;
    color: var(--text-muted);
}

/* =============================================
   Responsive — Tablet (768px)
   ============================================= */
@media (max-width: 768px) {

    .section__subtext {
        max-width: 100%;
        margin-bottom: 32px;
    }

    .partners__strip {
        gap: 24px;
    }

    .services__grid,
    .services__grid:has(.service-card:nth-child(2):last-child),
    .services__grid:has(.service-card:nth-child(4):last-child),
    .services__grid:has(.service-card:nth-child(5):last-child) {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .services__grid:has(.service-card:nth-child(5):last-child) .service-card:nth-child(4),
    .services__grid:has(.service-card:nth-child(5):last-child) .service-card:nth-child(5) {
        grid-column: auto;
    }

    .service-card {
        padding: 24px;
    }

    /* cases */
    .cases__grid {
        grid-template-columns: 1fr;
    }

    /* why us */
    .why__grid {
        grid-template-columns: 1fr;
    }

    /* footer */
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    #siteFooter {
        padding: 48px 0 0;
    }
}

/* =============================================
   Responsive — Mobile (480px)
   ============================================= */
@media (max-width: 480px) {

    .service-card {
        padding: 20px;
    }

    .case-card {
        padding: 20px;
    }

    .why__item {
        padding: 24px 20px;
    }

    .cta-band .btn--primary {
        width: 100%;
        text-align: center;
    }
}