/* =========================================================
   Stone360 LEGO – Kapcsolódó útmutatók
   A rétegrend-útmutató vizuális rendszeréhez igazítva
   Scope: kizárólag .tc-related-guides komponens
   Dátum: 2026-10-07
   ========================================================= */


/* =========================================================
   1. KOMPONENS ALAP
   ========================================================= */

.tc-related-guides {
    --tc-guides-accent: #178E79;
    --tc-guides-accent-hover: #137A69;

    --tc-guides-heading: #0F172A;
    --tc-guides-text: #454F5E;
    --tc-guides-muted: #6B7580;

    --tc-guides-border: #E3E8EC;
    --tc-guides-surface: #F7F9F8;
    --tc-guides-surface-hover: #F1F6F4;

    width: 100%;
    margin: 34px 0;
    padding: 24px 26px 26px;

    border: 1px solid var(--tc-guides-border);
    border-radius: 8px;

    background: #FFFFFF;

    font-family: "DM Sans", sans-serif;
    color: var(--tc-guides-text);

    box-shadow: none;
}


/* =========================================================
   2. FEJLÉC
   ========================================================= */

.tc-related-guides__header {
    max-width: 760px;
    margin: 0 0 20px;
}


/* "Szakmai segítség" */

.tc-related-guides__eyebrow {
    margin: 0 0 6px;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;

    letter-spacing: 0;
    text-transform: none;

    color: var(--tc-guides-accent);
}


/* Főcím */

.tc-related-guides .tc-related-guides__heading {
    margin: 0 0 9px;

    font-family: "DM Sans", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;

    letter-spacing: -0.02em;

    color: var(--tc-guides-heading) !important;
}


/* Bevezető */

.tc-related-guides__intro {
    margin: 0;

    font-family: "DM Sans", sans-serif;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--tc-guides-text);
}


/* =========================================================
   3. ÚTMUTATÓ KÁRTYÁK
   ========================================================= */

.tc-related-guides__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}


/* Egy útmutató */

.tc-related-guides__card {
    min-width: 0;
    margin: 0;

    border: 1px solid var(--tc-guides-border);
    border-radius: 8px;

    background: var(--tc-guides-surface);

    overflow: hidden;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}


.tc-related-guides__card:hover {
    background: var(--tc-guides-surface-hover);
    border-color: #D7E2DE;
}


.tc-related-guides__card-body {
    display: flex;
    flex-direction: column;

    height: 100%;

    padding: 16px 17px 15px;
}


/* "Útmutató" típusjelölés */

.tc-related-guides__type {
    display: block;

    margin: 0 0 6px;

    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.35;

    color: var(--tc-guides-muted);
}


/* Cikk címe */

.tc-related-guides .tc-related-guides__title {
    margin: 0 0 8px;

    font-family: "DM Sans", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;

    letter-spacing: -0.01em;

    color: var(--tc-guides-heading) !important;
}


.tc-related-guides__title a {
    color: var(--tc-guides-heading) !important;
    text-decoration: none;
}


.tc-related-guides__title a:hover,
.tc-related-guides__title a:focus {
    color: var(--tc-guides-accent) !important;
}


/* Kivonat */

.tc-related-guides__excerpt {
    margin: 0 0 13px;

    font-family: "DM Sans", sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.55;

    color: var(--tc-guides-text);
}


/* Link */

.tc-related-guides__link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    width: fit-content;

    margin-top: auto;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;

    color: var(--tc-guides-accent) !important;

    text-decoration: none;
    text-underline-offset: 3px;
}


.tc-related-guides__link:hover,
.tc-related-guides__link:focus {
    color: var(--tc-guides-accent-hover) !important;
    text-decoration: underline;
}


/* =========================================================
   4. HA CSAK EGY ÚTMUTATÓ VAN
   ========================================================= */

/*
   Egyetlen találatnál ne nyúljon ki fölöslegesen háromoszlopos
   kártyaként. Inkább egy széles, szakmai információs blokk legyen.
*/

.tc-related-guides__grid > .tc-related-guides__card:only-child {
    grid-column: 1 / -1;
}


.tc-related-guides__grid > .tc-related-guides__card:only-child
.tc-related-guides__card-body {
    padding: 16px 18px;
}


.tc-related-guides__grid > .tc-related-guides__card:only-child
.tc-related-guides__title {
    font-size: 18px !important;
}


.tc-related-guides__grid > .tc-related-guides__card:only-child
.tc-related-guides__excerpt {
    max-width: 900px;
}


/* =========================================================
   5. TABLET
   ========================================================= */

@media (max-width: 921px) {

    .tc-related-guides {
        margin: 30px 0;
        padding: 21px 22px 23px;
    }


    .tc-related-guides .tc-related-guides__heading {
        font-size: 24px !important;
    }


    .tc-related-guides__intro {
        font-size: 15px;
    }


    .tc-related-guides__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .tc-related-guides__grid > .tc-related-guides__card:only-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   6. MOBIL
   ========================================================= */

@media (max-width: 600px) {

    .tc-related-guides {
        margin: 25px 0;

        padding: 17px 15px 18px;

        border-radius: 8px;
    }


    .tc-related-guides__header {
        margin-bottom: 16px;
    }


    .tc-related-guides__eyebrow {
        margin-bottom: 5px;

        font-size: 12.5px;
    }


    .tc-related-guides .tc-related-guides__heading {
        margin-bottom: 8px;

        font-size: 22px !important;
        line-height: 1.25 !important;
    }


    .tc-related-guides__intro {
        font-size: 14.5px;
        line-height: 1.55;
    }


    .tc-related-guides__grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .tc-related-guides__card-body {
        padding: 14px 15px;
    }


    .tc-related-guides .tc-related-guides__title,
    .tc-related-guides__grid > .tc-related-guides__card:only-child
    .tc-related-guides__title {

        font-size: 16.5px !important;
        line-height: 1.35 !important;
    }


    .tc-related-guides__excerpt {
        font-size: 14px;
        line-height: 1.5;
    }


    .tc-related-guides__link {
        font-size: 14px;
    }
}