/* ==========================================================================
   Home "latest articles" and "latest news" rows, design v4 (G:\Projects\Design\home\Landing 5.png)
   --------------------------------------------------------------------------
   Two views share this sheet:
     articles  NopLine.Nop.Plugins.RichBlog  Themes/Ryan/Views/Components/RichBlogHomePage/Default.cshtml
     news      Themes/Ryan/Views/Shared/Components/HomepageNews/Default.cshtml
   Measured on the 2x design at a 1440px content width: articles are 387px cards with a
   387x272 photo, news 346px cards with a 346x375 photo, both 24px apart with 12px corners,
   and the row runs on past the content edge so the next card peeks in. The header is the
   showcase's own (title on the start side, a blue "more" link with a chevron on the end side).
   The rows are Swipers (home-posts.js); the arrows only show on a mouse, while hovering.
   ========================================================================== */

.tc-posts {
    --tc-po-ink: #292D32;
    --tc-po-text: #5C5F62;
    --tc-po-muted: #9E9E9E;
    --tc-po-link: #168FDF;
    --tc-po-photo-bg: #F4F2F0;
    --tc-po-card-w: 387px;
    --tc-po-ratio: 387 / 272;
    --tc-po-gap: 24px;
    position: relative;
    margin: 48px 0;
    color: var(--tc-po-ink);
    font-family: yekanbakh, tahoma, sans-serif;
    text-align: right;
}

.tc-posts--news {
    --tc-po-card-w: 346px;
    --tc-po-ratio: 346 / 375;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tc-posts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.tc-posts__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--tc-po-ink);
}

.tc-posts__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--tc-po-link);
    text-decoration: none;
}

.tc-posts__all:hover,
.tc-posts__all:focus {
    color: var(--tc-po-link);
    text-decoration: underline;
    text-underline-offset: 6px;
}

.tc-posts__all svg,
.tc-posts__more svg,
.tc-posts__nav svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tc-posts__all svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* --------------------------------------------------------------------------
   Row + arrows
   -------------------------------------------------------------------------- */

.tc-posts__viewport {
    position: relative;
}

/* Swiper's own sheet is not loaded by the theme: without touch-action the browser takes a
   sideways drag as a page pan and cancels the pointer, so the row would not follow the finger */
.tc-posts__row {
    overflow: hidden;
    touch-action: pan-y;
}

.tc-posts__row > .swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}

/* before Swiper runs: the same layout from plain flex, so nothing jumps */
.tc-posts__row:not(.swiper-initialized) > .swiper-wrapper {
    gap: var(--tc-po-gap);
}

.tc-posts__nav {
    position: absolute;
    /* on the middle of the photo */
    top: calc(var(--tc-po-card-w) / (var(--tc-po-ratio)) / 2 - 24px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--tc-po-ink);
    box-shadow: 0 2px 10px rgba(41, 45, 50, 0.14);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tc-posts__nav svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

/* the design shows the row at rest, without arrows: they come in while a mouse is over it,
   or when one of them has keyboard focus */
@media (hover: hover) and (pointer: fine) {
    .tc-posts__viewport:hover .tc-posts__nav,
    .tc-posts__nav:focus-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

.tc-posts__nav:hover {
    transform: scale(1.06);
}

.tc-posts__nav:focus-visible {
    outline: 2px solid var(--tc-po-link);
    outline-offset: 2px;
}

/* RTL: "next" moves the row to the left */
.tc-posts__nav--next {
    left: 12px;
}

.tc-posts__nav--prev {
    right: 12px;
}

.tc-posts .tc-posts__nav.swiper-button-disabled,
.tc-posts .tc-posts__nav.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.tc-posts__card {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: var(--tc-po-card-w);
    min-width: 0;
}

.tc-posts__media {
    display: block;
    aspect-ratio: var(--tc-po-ratio);
    border-radius: 12px;
    overflow: hidden;
    background: var(--tc-po-photo-bg);
}

.tc-posts__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.tc-posts__card:hover .tc-posts__media img {
    transform: scale(1.03);
}

/* the title keeps two lines' room, so the text under it starts level across the row */
.tc-posts__name {
    display: -webkit-box;
    min-height: 52px;
    margin: 16px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
}

.tc-posts__name a {
    color: var(--tc-po-ink);
    text-decoration: none;
}

.tc-posts__name a:hover,
.tc-posts__name a:focus {
    color: var(--tc-po-link);
}

.tc-posts__excerpt {
    display: -webkit-box;
    min-height: 44px;
    margin: 12px 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    line-height: 22px;
    color: var(--tc-po-text);
}

/* on the card's far (left) edge, as in the design */
.tc-posts__more {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: var(--tc-po-link);
    text-decoration: none;
}

.tc-posts__more:hover,
.tc-posts__more:focus {
    color: var(--tc-po-link);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.tc-posts__more svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.tc-posts__date {
    margin-top: 16px;
    font-size: 14px;
    line-height: 22px;
    color: var(--tc-po-muted);
}

/* --------------------------------------------------------------------------
   Phones: narrower cards, and the row is swiped
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .tc-posts {
        --tc-po-card-w: 264px;
        --tc-po-gap: 12px;
        margin: 32px 0;
    }

    .tc-posts--news {
        --tc-po-card-w: 216px;
    }

    .tc-posts__head {
        margin-bottom: 16px;
    }

    .tc-posts__title {
        font-size: 16px;
        line-height: 26px;
    }

    .tc-posts__all {
        font-size: 14px;
        line-height: 22px;
    }

    .tc-posts__all svg {
        width: 16px;
        height: 16px;
    }

    .tc-posts__name {
        min-height: 48px;
        margin-top: 12px;
        font-size: 14px;
        line-height: 24px;
    }

    .tc-posts__excerpt {
        min-height: 40px;
        margin-top: 8px;
        font-size: 13px;
        line-height: 20px;
    }

    .tc-posts__more {
        margin-top: 12px;
        font-size: 13px;
    }

    .tc-posts__date {
        margin-top: 8px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-posts__nav,
    .tc-posts__media img {
        transition: none;
    }

    .tc-posts__card:hover .tc-posts__media img {
        transform: none;
    }
}