/* ================================================================
 * Block: Content section — content_section
 * Design: Figma "Growston NEW" §Kafelki (46:1971) + §SEO Texts (51:2791)
 * Tokens: assets/css/growston-tokens.css (--g-*)
 * ================================================================ */

.g-content {
    padding-block: var(--g-space-9); /* 100px */
}

.g-content--light {
    background:
        linear-gradient(90deg, rgba(0, 229, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%, rgba(74, 20, 140, 0.06) 100%),
        var(--g-color-white);
}

.g-content--gray {
    background: #f7f7f7;
}

.g-content--dark {
    background: var(--g-color-hero-bg);
}

.g-content__inner {
    padding-inline: var(--g-pad-x);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-7); /* 50px */
}

/* Nagłówek sekcji — wspólny .g-section-head (growston-section-head.css) */

.g-content__text {
    width: 100%;
}

.g-content__text,
.g-content__text p,
.g-content__text li {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    line-height: 1.5;
    color: var(--g-color-ink);
}

.g-content--dark .g-content__text,
.g-content--dark .g-content__text p,
.g-content--dark .g-content__text li {
    color: var(--g-color-white);
}

.g-content__text p { margin: 0 0 0.75em; }
.g-content__text p:last-child { margin-bottom: 0; }

/* Lista WYSIWYG — kroki z ikoną ✓ zamiast domyślnych kropek */
.g-content__text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.g-content__text ul li {
    position: relative;
    padding-left: 34px;
    margin-bottom: var(--g-space-3);
}

.g-content__text ul li:last-child {
    margin-bottom: 0;
}

.g-content__text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    background: var(--g-color-cyan);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5L6.75 12.75L3 9'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5L6.75 12.75L3 9'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tabela HTML w treści — style globalne w components/tables.css; tu tylko odstęp */
.g-content__text table {
    margin-top: var(--g-space-5);
}

.g-content__text h3 {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-h3);
    line-height: 1.2;
    color: var(--g-color-heading);
    margin: var(--g-space-6) 0 var(--g-space-3);
}

.g-content__line {
    width: 100%;
    height: 1px;
    background: var(--g-color-line);
    margin-top: var(--g-space-6);
}

/* Kafelki z repeatera */
.g-content__tiles {
    display: grid;
    gap: var(--g-space-7); /* 50px */
    width: 100%;
}

.g-content__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-content__tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-content__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.g-content__tile {
    display: flex;
    align-items: center;
    gap: var(--g-space-5); /* 20px */
    background: var(--g-color-card); /* #FBFBFB */
    border-radius: var(--g-radius-tile); /* 20px */
    padding: var(--g-space-6); /* 30px */
}

.g-content__tile-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--g-icon-lg);
    height: var(--g-icon-lg);
    border-radius: var(--g-radius-pill);
    background: var(--g-color-heading); /* #0C365C */
    overflow: hidden;
}

.g-content__tile-icon img {
    width: 43%;
    height: 43%;
    object-fit: contain;
    filter: invert(1) brightness(2);
}

.g-content__tile-body {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.g-content__tile-title {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-h3); /* 35px */
    line-height: 1.2;
    color: var(--g-color-heading);
    margin: 0;
}

.g-content__tile-text {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    line-height: 1.4;
    color: var(--g-color-heading);
    margin: 0;
}

/* Karty z listy <ul> (46:1971) */
.g-content__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g-space-7); /* 50px */
    width: 100%;
}

.g-content__card {
    display: flex;
    align-items: center;
    gap: var(--g-space-5);
    background: var(--g-color-card);
    border-radius: var(--g-radius-tile);
    padding: var(--g-space-6);
}

.g-content__card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--g-icon-lg);
    height: var(--g-icon-lg);
    border-radius: var(--g-radius-pill);
    background: var(--g-color-heading);
    color: var(--g-color-white);
}

.g-content__card-icon svg {
    width: 43%;
    height: 43%;
}

.g-content__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.g-content__card-title {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-h3);
    line-height: 1.2;
    color: var(--g-color-heading);
}

.g-content__card-desc {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    line-height: 1.4;
    color: var(--g-color-heading);
}

/* Cytat */
.g-content__quote {
    margin: 0;
    text-align: center;
}

.g-content__quote blockquote {
    margin: 0 0 var(--g-space-3);
    font-family: var(--g-font-body);
    font-style: italic;
    font-size: var(--g-fs-body);
    line-height: 1.4;
    color: var(--g-color-ink);
}

.g-content--dark .g-content__quote blockquote {
    color: var(--g-color-white);
}

.g-content__quote figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-3);
}

.g-content__quote-photo {
    border-radius: var(--g-radius-pill);
}

/* CTA */
.g-content__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
}

.g-content__note {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    color: var(--g-color-ink);
    margin: 0;
}

.g-content--dark .g-content__note {
    color: var(--g-color-white);
}

/* Przycisk wtórny z ciemnym obrysem */
.g-btn--outline-dark {
    position: relative;
    isolation: isolate;
    background: transparent;
    color: var(--g-color-ink);
    border: 2px solid var(--g-color-ink);
}

/* Cyan fill slides in from the left on hover */
.g-btn--outline-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--g-color-cyan) 20%, transparent);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.g-btn--outline-dark:hover::before {
    transform: translateX(0);
}

.g-content--dark .g-btn--outline-dark {
    color: var(--g-color-white);
    border-color: var(--g-color-white);
}

/* ── Responsywność ── */
@media (max-width: 1024px) {
    .g-content__tiles--3,
    .g-content__tiles--4,
    .g-content__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .g-content__tiles,
    .g-content__tiles--2,
    .g-content__tiles--3,
    .g-content__tiles--4,
    .g-content__cards {
        grid-template-columns: 1fr;
    }
    .g-content__tile,
    .g-content__card {
        flex-direction: column;
        align-items: flex-start;
    }
}