/* ============================================================
   FII-CONSTIENT.RO
   VIEW.CSS
   PAGINĂ ARTICOL
============================================================ */


/* ============================================================
   VARIABILE
============================================================ */

:root {
    --reader-font-size: 19px;
    --reader-line-height: 1.55;
    --reader-width: 900px;

    --view-ink: #211b14;
    --view-paper: #eee2bf;
    --view-paper-dark: #e7dcc0;
    --view-line: rgba(33, 27, 20, .65);
    --view-soft-line: rgba(33, 27, 20, .22);
}


/* ============================================================
   PROGRES LECTURĂ
============================================================ */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;

    width: 100%;
    height: 3px;

    background: rgba(33, 27, 20, .12);

    pointer-events: none;
}

.reading-progress-bar {
    width: 0;
    height: 100%;

    background: var(--view-ink);

    transition: width .06s linear;
}


/* ============================================================
   CONTAINER ARTICOL
============================================================ */

.article-view {
    width: 100%;
    max-width: 1050px;

    margin: 20px auto 0;
}


/* ============================================================
   HEADER ARTICOL
============================================================ */

.article-header {
    margin-bottom: 0;
}

.article-category {
    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;

    text-transform: uppercase;
}

.article-category a {
    color: var(--view-ink);
    text-decoration: none;
}

.article-category a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================
   TITLU
============================================================ */

.article-title {
    max-width: 1000px;

    margin: 0 0 15px;

    color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 6vw, 68px);
    font-weight: 900;
    line-height: .98;

    letter-spacing: -1.8px;
}


/* ============================================================
   META
============================================================ */

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--view-line);

    color: var(--view-ink);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ============================================================
   READER BAR COMPACT
============================================================ */

.article-reader-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 46px;

    margin-bottom: 12px;
    padding: 6px 0;

    border-bottom: 4px double var(--view-ink);
}


/* ============================================================
   STATISTICI
============================================================ */

.reading-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 5px;

    flex-shrink: 0;

    font-size: 8px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: .75px;
    text-transform: uppercase;

    white-space: nowrap;
}

.reader-separator {
    opacity: .55;
}


/* ============================================================
   CONTROALE
============================================================ */

.reader-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    gap: 3px;
}

.reader-width-control {
    display: flex;
    gap: 2px;
}

.reader-control-divider {
    width: 1px;
    height: 20px;

    margin: 0 3px;

    background: rgba(33, 27, 20, .28);
}


/* ============================================================
   BUTOANE READER
============================================================ */

.reader-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 32px;
    height: 29px;

    margin: 0;
    padding: 0 8px;

    border: 1px solid rgba(33, 27, 20, .72);
    border-radius: 0;

    background: transparent;
    background-image: none;

    color: var(--view-ink);
    -webkit-text-fill-color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 8px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: .25px;
    text-transform: uppercase;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    touch-action: manipulation;

    user-select: none;
    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        background .12s ease,
        color .12s ease;
}

.reader-icon-button {
    width: 32px;
    padding: 0;
}

.reader-button:hover,
.reader-button.active {
    background: var(--view-ink);
    color: var(--view-paper);
    -webkit-text-fill-color: var(--view-paper);
}


/* ============================================================
   CONTINUĂ LECTURA
============================================================ */

.resume-reading {
    display: none;

    max-width: var(--reader-width);

    margin: 12px auto;
    padding: 9px 11px;

    border: 1px solid var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;
}

.resume-reading.show {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.resume-reading > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    font-size: 11px;
}

.resume-reading strong {
    text-transform: uppercase;

    font-size: 9px;
    letter-spacing: .8px;
}

.resume-reading span {
    opacity: .75;
}

.resume-button {
    flex-shrink: 0;

    padding: 6px 9px;

    border: 0;

    background: var(--view-ink);
    color: var(--view-paper);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;

    text-transform: uppercase;

    cursor: pointer;
}


/* ============================================================
   SHARE
============================================================ */

.article-share {
    max-width: var(--reader-width);

    margin: 0 auto 18px;
    padding-bottom: 12px;

    border-bottom: 1px dotted var(--view-ink);
}

.article-share-label {
    margin-bottom: 5px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.article-share-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 5px;
}

.article-link-input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 34px;

    margin: 0;
    padding: 6px 9px;

    border: 1px solid var(--view-ink);
    border-radius: 0;

    outline: 0;

    background: rgba(255, 255, 255, .12);

    color: var(--view-ink);
    -webkit-text-fill-color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
}

.copy-link-button {
    min-width: 82px;
    height: 34px;

    margin: 0;
    padding: 0 10px;

    border: 1px solid var(--view-ink);

    background: var(--view-ink);
    color: var(--view-paper);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;

    text-transform: uppercase;

    cursor: pointer;
}

.copy-link-button:hover {
    background: transparent;
    color: var(--view-ink);
}

.copy-message {
    display: none;

    margin-top: 5px;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;

    text-transform: uppercase;
}

.copy-message.show {
    display: block;
}


/* ============================================================
   COPERTĂ
============================================================ */

.article-cover-wrap {
    margin: 0 0 22px;
    padding: 0;
}

.article-cover {
    display: block;

    width: 100%;
    max-height: 610px;

    margin: 0;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(100%)
        sepia(20%)
        contrast(94%);
}


/* ============================================================
   CONȚINUT
============================================================ */

.article-body {
    width: 100%;
    max-width: var(--reader-width);

    margin: 0 auto;

    color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;

    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);

    overflow-wrap: break-word;
    word-wrap: break-word;

    transition:
        font-size .08s ease,
        max-width .15s ease,
        line-height .15s ease;
}

.article-body p {
    margin: 0 0 13px;
    padding: 0;
}

.article-body p:last-child {
    margin-bottom: 0;
}

.article-body ul,
.article-body ol {
    margin: 12px 0 16px 28px;
}

.article-body li {
    margin-bottom: 6px;
}

.article-body blockquote {
    margin: 22px 0;
    padding: 15px 20px;

    border-left: 4px solid var(--view-ink);

    font-size: 1.08em;
    font-style: italic;
}


/* ============================================================
   VIDEO
============================================================ */

.video-wrap {
    position: relative;

    width: 100%;
    max-width: var(--reader-width);

    aspect-ratio: 16 / 9;

    margin: 28px auto;

    overflow: hidden;

    border: 1px solid var(--view-ink);

    background: #000;
}

.video-wrap iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* ============================================================
   TAGURI
============================================================ */

.tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    max-width: var(--reader-width);

    margin: 27px auto 0;
    padding-top: 13px;

    border-top: 1px dotted var(--view-ink);
}

.tag {
    display: inline-block;

    padding: 5px 8px;

    border: 1px solid var(--view-ink);

    color: var(--view-ink);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;

    text-decoration: none;
    text-transform: uppercase;
}

.tag:hover {
    background: var(--view-ink);
    color: var(--view-paper);
}


/* ============================================================
   SURSE
============================================================ */

.sources {
    max-width: var(--reader-width);

    margin: 28px auto 0;
    padding: 14px 0;

    border-top: 4px double var(--view-ink);
    border-bottom: 1px solid var(--view-ink);
}

.section-kicker {
    margin-bottom: 4px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sources h2 {
    margin: 0 0 9px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;
    line-height: 1;
}

.source-links {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.source-links a {
    padding: 6px 9px;

    border: 1px solid var(--view-ink);

    color: var(--view-ink);

    font-size: 9px;
    font-weight: 900;

    text-decoration: none;
    text-transform: uppercase;
}

.source-links a:hover {
    background: var(--view-ink);
    color: var(--view-paper);
}


/* ============================================================
   POATE TE INTERESEAZĂ
============================================================ */

.related-section {
    width: 100%;

    margin: 45px auto 8px;
    padding-top: 16px;

    border-top: 5px double var(--view-ink);
}

.related-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}

.related-heading h2 {
    margin: 0;

    color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    line-height: 1;

    letter-spacing: -1px;
}

.related-category-link {
    flex-shrink: 0;

    padding-bottom: 2px;

    border-bottom: 1px solid var(--view-ink);

    color: var(--view-ink);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;

    text-decoration: none;
    text-transform: uppercase;
}


/* ============================================================
   GRID RELATED
============================================================ */

.related-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.related-card {
    min-width: 0;

    border-top: 1px solid var(--view-ink);
}

.related-image-link {
    position: relative;

    display: block;

    width: 100%;

    margin-top: 5px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;
}

.related-image {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    object-fit: cover;

    filter:
        grayscale(100%)
        sepia(16%)
        contrast(95%);

    transition:
        transform .25s ease,
        filter .25s ease;
}

.related-card:hover .related-image {
    transform: scale(1.025);

    filter:
        grayscale(65%)
        sepia(15%)
        contrast(100%);
}

.related-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(33, 27, 20, .08),
            rgba(33, 27, 20, .08) 8px,
            transparent 8px,
            transparent 16px
        );
}

.related-image-placeholder span {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.related-number {
    position: absolute;
    left: 7px;
    bottom: 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 26px;

    padding: 0 5px;

    background: var(--view-paper);
    color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 11px;
    font-weight: 900;
}

.related-card-content {
    padding-top: 9px;
}

.related-meta {
    margin-bottom: 6px;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .8px;
    text-transform: uppercase;
}

.related-meta span {
    margin: 0 3px;
    opacity: .55;
}

.related-card h3 {
    margin: 0 0 8px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;

    letter-spacing: -.35px;
}

.related-card h3 a {
    color: var(--view-ink);
    text-decoration: none;
}

.related-card h3 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.related-read {
    display: inline-block;

    color: var(--view-ink);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;

    text-decoration: none;
    text-transform: uppercase;
}


/* ============================================================
   BACK TO TOP
============================================================ */

.back-to-top {
    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--view-ink);
    border-radius: 0;

    background: var(--view-paper);
    color: var(--view-ink);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, .12);
}

.back-to-top.show {
    display: flex;
}

.back-to-top:hover {
    background: var(--view-ink);
    color: var(--view-paper);
}


/* ============================================================
   MOD CITIRE
============================================================ */

body.reader-mode {
    padding: 0 !important;

    background: var(--view-paper-dark) !important;
}

body.reader-mode .paper {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        24px
        20px
        60px !important;

    box-shadow: none !important;
}


/* ============================================================
   ASCUNDE STRUCTURA SITE-ULUI
============================================================ */

body.reader-mode .topbar,
body.reader-mode .search-panel,
body.reader-mode .header-search-panel,
body.reader-mode .masthead,
body.reader-mode .motto,
body.reader-mode .edition,
body.reader-mode nav,
body.reader-mode .breaking,
body.reader-mode footer {
    display: none !important;
}


/* ============================================================
   READER ARTICLE
============================================================ */

body.reader-mode .article-view {
    max-width: 900px;

    margin: 0 auto;
}

body.reader-mode .article-category,
body.reader-mode .article-meta,
body.reader-mode .article-cover-wrap,
body.reader-mode .video-wrap,
body.reader-mode .tags,
body.reader-mode .sources,
body.reader-mode .article-share,
body.reader-mode .related-section {
    display: none !important;
}

body.reader-mode .article-title {
    max-width: 780px;

    margin: 15px auto 18px;

    text-align: center;

    font-size: clamp(38px, 6vw, 58px);
    line-height: 1.03;
}

body.reader-mode .article-reader-bar {
    position: sticky;
    top: 0;

    z-index: 1000;

    max-width: 900px;

    margin: 0 auto 24px;
    padding: 7px 8px;

    background: var(--view-paper-dark);

    border-top: 1px solid var(--view-ink);
    border-bottom: 4px double var(--view-ink);
}


/* ============================================================
   404
============================================================ */

.article-not-found {
    padding: 65px 20px;

    text-align: center;
}

.article-not-found-number {
    margin-bottom: 6px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
    font-weight: 900;

    letter-spacing: 4px;
}

.article-not-found h1 {
    margin: 0 0 12px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 42px;
}

.article-not-found p {
    margin-bottom: 20px;
}

.article-not-found a {
    color: var(--view-ink);

    font-weight: 900;
}


/* ============================================================
   PRINT
============================================================ */

@media print {

    .topbar,
    .search-panel,
    .header-search-panel,
    .masthead,
    .motto,
    .edition,
    nav,
    .breaking,
    .article-reader-bar,
    .resume-reading,
    .article-share,
    .back-to-top,
    .related-section,
    footer {
        display: none !important;
    }

    body {
        padding: 0 !important;

        background: #fff !important;
        color: #000 !important;
    }

    .paper {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;

        box-shadow: none !important;
    }

    .article-view {
        max-width: none !important;
    }

    .article-body {
        max-width: none !important;

        color: #000 !important;

        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
}


/* ============================================================
   TABLETĂ
============================================================ */

@media (max-width: 850px) {

    .article-view {
        margin-top: 15px;
    }

    .article-title {
        font-size: clamp(37px, 8vw, 55px);
    }

    .article-reader-bar {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

    .reader-controls {
        justify-content: flex-start;

        width: 100%;
    }

    .related-grid {
        gap: 10px;
    }

    .related-card h3 {
        font-size: 17px;
    }
}


/* ============================================================
   MOBIL
============================================================ */

@media (max-width: 550px) {

    .article-view {
        margin-top: 9px;
    }

    .article-category {
        margin-bottom: 6px;

        font-size: 8px;
    }

    .article-title {
        margin-bottom: 10px;

        font-size: 36px;
        line-height: 1;

        letter-spacing: -1.15px;
    }

    .article-meta {
        gap: 4px;

        padding-bottom: 8px;

        font-size: 7px;
        letter-spacing: .65px;
    }

    .article-reader-bar {
        gap: 7px;

        min-height: 0;

        margin-bottom: 10px;
        padding: 6px 0 7px;
    }

    .reading-stats {
        font-size: 7px;
    }


    /* ========================================================
       TOOLBAR MOBIL COMPACT
    ======================================================== */

    .reader-controls {
        display: grid;

        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        gap: 3px;
    }

    .reader-control-divider {
        display: none;
    }

    .reader-width-control {
        display: contents;
    }

    .reader-button {
        width: 100%;
        min-width: 0;
        height: 31px;

        padding: 0 3px;

        font-size: 7px;
    }

    .reader-icon-button {
        width: 100%;
    }


    /* ========================================================
       CONTINUĂ
    ======================================================== */

    .resume-reading.show {
        display: block;
    }

    .resume-reading > div {
        display: block;
    }

    .resume-reading strong,
    .resume-reading span {
        display: block;
    }

    .resume-reading span {
        margin-top: 3px;
    }

    .resume-button {
        width: 100%;

        margin-top: 8px;
    }


    /* ========================================================
       SHARE
    ======================================================== */

    .article-share {
        margin-bottom: 15px;
    }

    .article-share-row {
        grid-template-columns:
            minmax(0, 1fr)
            72px;
    }

    .article-link-input {
        height: 34px;

        font-size: 9px;
    }

    .copy-link-button {
        min-width: 0;
    }


    /* ========================================================
       COPERTĂ
    ======================================================== */

    .article-cover-wrap {
        margin-bottom: 16px;
    }

    .article-cover {
        max-height: 350px;
    }


    /* ========================================================
       TEXT
    ======================================================== */

    .article-body p {
        margin-bottom: 10px;
    }


    /* ========================================================
       RELATED
    ======================================================== */

    .related-section {
        margin-top: 35px;
        padding-top: 12px;
    }

    .related-heading {
        align-items: flex-start;

        gap: 8px;

        margin-bottom: 13px;
    }

    .related-heading h2 {
        font-size: 29px;
    }

    .related-category-link {
        margin-top: 4px;

        font-size: 6px;
    }

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

        gap: 16px;
    }

    .related-card {
        display: grid;

        grid-template-columns:
            120px
            minmax(0, 1fr);

        gap: 10px;

        padding-top: 5px;
    }

    .related-image-link {
        margin: 0;
    }

    .related-image {
        height: 92px;

        aspect-ratio: auto;
    }

    .related-number {
        left: 5px;
        bottom: 5px;

        min-width: 25px;
        height: 21px;

        font-size: 9px;
    }

    .related-card-content {
        padding: 0;
    }

    .related-meta {
        margin-bottom: 4px;

        font-size: 6px;
    }

    .related-card h3 {
        margin-bottom: 5px;

        font-size: 16px;
        line-height: 1.04;
    }

    .related-read {
        font-size: 6px;
    }


    /* ========================================================
       READER MODE MOBIL
    ======================================================== */

    body.reader-mode .paper {
        padding:
            11px
            13px
            50px !important;
    }

    body.reader-mode .article-view {
        margin: 0;
    }

    body.reader-mode .article-title {
        margin:
            14px
            0
            17px;

        font-size: 34px;

        text-align: left;
    }

    body.reader-mode .article-reader-bar {
        position: sticky;

        margin:
            0
            -3px
            19px;

        padding:
            6px
            3px
            7px;
    }
}

/* ============================================================
   ARTICLE ENGAGEMENT
============================================================ */

.article-engagement {

    display:
        flex;

    align-items:
        stretch;

    gap:
        8px;

    margin:
        18px
        0
        4px;

    padding-top:
        14px;

    border-top:
        1px dotted rgba(33, 27, 20, .45);

}


/* ============================================================
   LIKE + COMMENTS
============================================================ */

.article-like-button,
.article-comments-link {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0
        14px;

    border:
        1px solid #211b14;

    border-radius:
        0;

    background:
        transparent;

    color:
        #211b14;

    -webkit-text-fill-color:
        #211b14;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .18s ease,
        color .18s ease;

}


.article-like-button svg,
.article-comments-link svg {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 auto;

}


.article-like-button strong,
.article-comments-link strong {

    min-width:
        20px;

    font-size:
        12px;

    font-weight:
        900;

}


/* ============================================================
   HOVER
============================================================ */

.article-like-button:hover,
.article-comments-link:hover {

    background:
        rgba(33, 27, 20, .07);

}


/* ============================================================
   LIKED
============================================================ */

.article-like-button.liked {

    background:
        #211b14;

    color:
        #eee2bf;

    -webkit-text-fill-color:
        #eee2bf;

}


.article-like-button.liked svg {

    fill:
        currentColor;

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 550px) {

    .article-engagement {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            7px;

    }


    .article-like-button,
    .article-comments-link {

        width:
            100%;

        min-height:
            46px;

        padding:
            0
            9px;

        font-size:
            12px;

    }

}
/* ============================================================
   STATISTICI INFORMATIVE LIKE + COMENTARII — SUS
============================================================ */

.article-engagement-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 18px;
    padding: 12px 0;

    border-top: 1px dotted rgba(33, 27, 20, .35);
    border-bottom: 1px dotted rgba(33, 27, 20, .35);
}


.article-engagement-info-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #211b14;
    font-size: 14px;
    line-height: 1;
}


/* ICONIȚELE MICI */

.article-engagement-info-item .article-engagement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;
}


.article-engagement-info-item .article-engagement-icon svg {
    display: block;

    width: 18px !important;
    height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;
}


/* TEXT */

.article-engagement-info-item .article-engagement-text {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}


/* NUMĂR */

.article-engagement-info-item .article-engagement-count {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 700;
}


/* ============================================================
   MOBIL
============================================================ */

@media (max-width: 700px) {

    .article-engagement-info {
        gap: 18px;

        margin-top: 14px;
        padding: 10px 0;
    }


    .article-engagement-info-item {
        gap: 6px;

        font-size: 13px;
    }


    .article-engagement-info-item .article-engagement-icon {
        width: 18px;
        height: 18px;

        flex-basis: 18px;
    }


    .article-engagement-info-item .article-engagement-icon svg {
        width: 17px !important;
        height: 17px !important;

        max-width: 17px !important;
        max-height: 17px !important;
    }


    .article-engagement-info-item .article-engagement-text,
    .article-engagement-info-item .article-engagement-count {
        font-size: 13px;
    }

}