/* /css/tcmag.css */

.tcmag-block {
    --tcmag-bg: transparent;
    --tcmag-text: #ffffff;
    --tcmag-muted: rgba(255, 255, 255, 0.78);
    --tcmag-line: rgba(255, 255, 255, 0.22);
    --tcmag-hover: rgba(255, 255, 255, 0.06);

    background: transparent;
    color: var(--tcmag-text);
    border: 0;
}

.tcmag-block__link {
    display: block;
    color: inherit;
    text-decoration: none;
    background: transparent;
    transition: background-color .2s ease;
}

.tcmag-block__link:hover,
.tcmag-block__link:focus-visible {
    background: var(--tcmag-hover);
    color: inherit;
    text-decoration: none;
}

.tcmag-inner {
    width: min(1200px, calc(100% - 48px));
    min-height: 318px;
    margin-inline: auto;
    padding-block: 42px 38px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
    grid-template-areas:
        "identity pillars"
        "identity cta";
    column-gap: clamp(42px, 6vw, 86px);
    row-gap: 26px;
    align-items: center;
}

.tcmag-identity {
    grid-area: identity;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.tcmag-logo-wrap {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.tcmag-logo {
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
}

.tcmag-copy {
    min-width: 0;
}

.tcmag-name {
    display: block;
    margin: 0 0 9px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tcmag-copy h2 {
    margin: 0;
    max-width: 620px;
    font-size: clamp(27px, 2.3vw, 38px);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -.025em;
    color: var(--tcmag-text);
}

.tcmag-copy p {
    margin: 17px 0 0;
    max-width: 660px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--tcmag-muted);
}

.tcmag-pillars {
    grid-area: pillars;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
}

.tcmag-pillar {
    padding-block-start: 11px;
    border-block-start: 1px solid var(--tcmag-line);
}

.tcmag-pillar strong,
.tcmag-pillar span {
    display: block;
}

.tcmag-pillar strong {
    margin-block-end: 5px;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--tcmag-text);
}

.tcmag-pillar span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tcmag-muted);
}

.tcmag-cta {
    grid-area: cta;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-block-end: 3px;
    border-block-end: 1px solid currentColor;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.tcmag-block__link:hover .tcmag-cta span,
.tcmag-block__link:focus-visible .tcmag-cta span {
    transform: translateX(3px);
}

.tcmag-cta span {
    transition: transform .2s ease;
}

[dir="rtl"] .tcmag-block__link:hover .tcmag-cta span,
[dir="rtl"] .tcmag-block__link:focus-visible .tcmag-cta span {
    transform: translateX(-3px);
}

@media (max-width: 900px) {
    .tcmag-inner {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "pillars"
            "cta";
        row-gap: 30px;
        padding-block: 40px;
    }

    .tcmag-identity {
        align-items: start;
    }
}

@media (max-width: 620px) {
    .tcmag-inner {
        width: min(100% - 36px, 1200px);
        padding-block: 34px 32px;
    }

    .tcmag-identity {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 18px;
    }

    .tcmag-logo-wrap,
    .tcmag-logo {
        width: 76px;
        height: 76px;
    }

    .tcmag-name {
        font-size: 11.5px;
    }

    .tcmag-copy h2 {
        font-size: clamp(25px, 8vw, 32px);
    }

    .tcmag-copy p {
        grid-column: 1 / -1;
        font-size: 14.5px;
    }

    .tcmag-pillars {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tcmag-pillar {
        padding-block-start: 10px;
    }
}