/**
 * B11 - Articles Section Styles
 *
 * 1:1 with design contract B11-ArticlesSection.dc.html (claude.ai/design 1127ca42).
 * Three layouts: grid / list / carousel.
 *
 * Tokens (from the Saly front design system):
 *   --gray-100 #F8F9FA  --gray-300 #EBEEF1  --gray-800 #717175  --gray-900 #4E4F55
 *   --black #333333      --radius-lg 12px    --brand-500 #5E2CED  --brand-700 #3D10BE
 * Brand accent resolves to the instance palette: --saly-ps-primary-color (inline) →
 * --brand-500 (front bridge) → literal fallback. Cards without a photo get a
 * brand-color gradient placeholder (--brand-500 → --brand-700).
 *
 * CSS Isolation: every class uses the .saly-ps- prefix.
 */

/* ============ BLOCK ROOT ============ */
.saly-ps-block-articles {
    width: 100%;
    position: relative;
    background-color: transparent;
    padding: var(--saly-ps-b11-padding, 40px 16px);
    font-family: 'Spartan', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.02em;
    container-type: inline-size;
    container-name: articles-block;

    /* Brand accent (instance palette with safe fallbacks) */
    --b11-accent: var(--saly-ps-primary-color, var(--brand-500, #5E2CED));
    --b11-accent-strong: var(--brand-700, #3D10BE);
    --b11-accent-tint: var(--brand-100, #F4F1FE);
    --b11-accent-tint-border: var(--brand-200, #EDE8FD);
}

/* Full-width background band (white by default; honours the builder's
   backgroundColor). Same pseudo-element technique as B06 Banners Row. */
.saly-ps-block-articles::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    background: var(--saly-ps-b11-bg-color, #ffffff);
    z-index: -1;
}

.saly-ps-block-articles * {
    box-sizing: border-box;
}

.saly-ps-articles-wrapper {
    max-width: 1180px;
    margin: 0 auto;
}

/* ============ HEADER ============ */
.saly-ps-articles-header {
    margin-bottom: 22px;
}

.saly-ps-articles-title {
    margin: 0 0 4px;
    font-size: 1.75rem;       /* size-8 / 28px */
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--black, #333333);
}

.saly-ps-articles-subtitle {
    margin: 0;
    font-size: 0.875rem;      /* size-2 / 14px */
    line-height: 1.5;
    color: var(--gray-800, #717175);
}

/* ============ CARD ============ */
.saly-ps-article-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--gray-300, #EBEEF1);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover: no colour-shift on the border (kept neutral) — just a light shadow. */
.saly-ps-article-card:hover {
    box-shadow: 0 6px 20px rgba(51, 51, 51, 0.08);
}

/* ---- MEDIA ----
   The brand-color gradient is the media's BASE background, so any article whose
   image is missing, broken, or still loading shows the gradient (never an empty
   grey box). A loaded opaque image simply paints over it. */
.saly-ps-article-media {
    display: block;
    height: 170px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--b11-accent), var(--b11-accent-strong));
    line-height: 0;
    flex-shrink: 0;
}

/* Per-card gradient variety (mirrors the design contract mock) */
.saly-ps-article-card:nth-child(3n+2) .saly-ps-article-media {
    background: linear-gradient(135deg, var(--b11-accent-strong), var(--b11-accent));
}

.saly-ps-article-card:nth-child(3n) .saly-ps-article-media {
    background: linear-gradient(155deg, var(--b11-accent), var(--b11-accent-strong) 60%, var(--brand-300, #DFD5FB));
}

.saly-ps-article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative; /* paint above the gradient + glyph */
    z-index: 1;
    transition: transform 0.4s ease;
}

.saly-ps-article-card:hover .saly-ps-article-img {
    transform: scale(1.04);
}

/* Faint document glyph centered when there is no image (true placeholder) */
.saly-ps-article-media--placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
    opacity: 0.28;
}

/* Subtle top-corner sheen */
.saly-ps-article-media--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 85% -10%, rgba(255, 255, 255, 0.20), transparent 60%);
}

/* ---- CONTENT ---- */
.saly-ps-article-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 16px 18px 18px;
}

.saly-ps-article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.75rem;       /* size-1 / 12px */
    color: var(--gray-800, #717175);
}

/* Category — soft primary pill (badge-color-primary) */
.saly-ps-article-category {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 24px;
    background: var(--b11-accent-tint);
    color: var(--b11-accent-strong);
    border: 1px solid var(--b11-accent-tint-border);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.saly-ps-article-date {
    font-size: 0.75rem;
    color: var(--gray-800, #717175);
}

.saly-ps-article-title {
    margin: 0;
    font-size: 1.125rem;      /* size-4 / 18px */
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--black, #333333);
}

/* !important: the storefront theme forces a brand link colour on every <a>;
   article titles must stay anthracite (design contract) — only the read-more
   link is the brand colour. */
.saly-ps-article-title a {
    color: #333333 !important;
    text-decoration: none;
}

.saly-ps-article-title a:hover {
    color: var(--b11-accent-strong) !important;
}

.saly-ps-article-excerpt {
    margin: 0;
    font-size: 0.75rem;       /* grid: size-1 / 12px */
    line-height: 1.5;
    color: var(--gray-900, #4E4F55);
}

/* "Read more" link with arrow */
.saly-ps-article-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-top: 4px;
    color: var(--b11-accent) !important; /* beat the theme's forced link colour */
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
}

.saly-ps-article-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.saly-ps-article-link:hover {
    color: var(--b11-accent-strong) !important;
}

.saly-ps-article-card:hover .saly-ps-article-link svg {
    transform: translateX(3px);
}

/* ============ GRID ============ */
.saly-ps-articles-grid {
    display: grid;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.saly-ps-articles-grid[data-saly-ps-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.saly-ps-articles-grid[data-saly-ps-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.saly-ps-articles-grid[data-saly-ps-columns="4"] { grid-template-columns: repeat(4, 1fr); }

/* ============ LIST ============ */
.saly-ps-articles-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.saly-ps-articles-list .saly-ps-article-card {
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}

.saly-ps-articles-list .saly-ps-article-media {
    width: 220px;
    height: auto;
    align-self: stretch;
}

.saly-ps-articles-list .saly-ps-article-content {
    padding: 18px 18px 18px 0;
}

.saly-ps-articles-list .saly-ps-article-title {
    font-size: 1.25rem;       /* size-5 / 20px */
    line-height: 1.2;
}

.saly-ps-articles-list .saly-ps-article-excerpt {
    font-size: 0.875rem;      /* list: size-2 / 14px */
}

/* ============ CAROUSEL ============
   The viewport spans the full content width (cards align with the title /
   subtitle); the arrows float OUTSIDE that width in the section's gutter — same
   feel as the B10 Brands carousel. On narrower screens (no gutter) the arrows
   overlay the card edges instead of clipping off-screen. */
.saly-ps-articles-carousel-wrap {
    position: relative;
}

.saly-ps-articles-viewport {
    width: 100%;
    overflow: hidden;
}

.saly-ps-articles-arrow {
    position: absolute;
    top: 85px;                 /* vertically centered on the 170px media row */
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--gray-300, #EBEEF1);
    color: var(--black, #333333);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.saly-ps-articles-arrow.saly-ps-nav-prev { left: -56px; }
.saly-ps-articles-arrow.saly-ps-nav-next { right: -56px; }

/* No room in the gutter — tuck the arrows just inside the edges */
@media (max-width: 1300px) {
    .saly-ps-articles-arrow.saly-ps-nav-prev { left: 8px; }
    .saly-ps-articles-arrow.saly-ps-nav-next { right: 8px; }
}

.saly-ps-articles-arrow:hover {
    border-color: var(--b11-accent);
    color: var(--b11-accent);
    box-shadow: var(--shadow-sm, 0 4px 50px rgba(51, 51, 51, 0.03));
}

.saly-ps-articles-arrow:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: var(--gray-300, #EBEEF1);
    color: var(--black, #333333);
    box-shadow: none;
}

.saly-ps-articles-arrow svg {
    width: 19px;
    height: 19px;
}

/* Carousel: JS swaps the grid to a horizontal flex slider (translateX) */
.saly-ps-articles-grid--carousel {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 20px !important;
    transform: translateX(0);
}

.saly-ps-articles-grid--carousel .saly-ps-article-card {
    flex: 0 0 auto;
}

.saly-ps-articles-grid--carousel[data-saly-ps-columns="2"] .saly-ps-article-card { width: calc((100% - 20px) / 2); }
.saly-ps-articles-grid--carousel[data-saly-ps-columns="3"] .saly-ps-article-card { width: calc((100% - 40px) / 3); }
.saly-ps-articles-grid--carousel[data-saly-ps-columns="4"] .saly-ps-article-card { width: calc((100% - 60px) / 4); }

/* ============ EMPTY ============ */
.saly-ps-no-articles {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--gray-800, #717175);
    font-size: 0.875rem;
}

/* ============ RESPONSIVE (media queries) ============ */
@media (max-width: 1024px) {
    .saly-ps-articles-grid[data-saly-ps-columns="4"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .saly-ps-articles-grid[data-saly-ps-columns="3"],
    .saly-ps-articles-grid[data-saly-ps-columns="4"] { grid-template-columns: repeat(2, 1fr); }

    .saly-ps-articles-list .saly-ps-article-card { flex-direction: column; }
    .saly-ps-articles-list .saly-ps-article-media { width: 100%; height: 180px; }
    .saly-ps-articles-list .saly-ps-article-content { padding: 0 18px 18px; }
}

@media (max-width: 640px) {
    .saly-ps-articles-grid { grid-template-columns: 1fr !important; }
    .saly-ps-articles-grid--carousel .saly-ps-article-card { width: 100% !important; }
    .saly-ps-articles-title { font-size: 1.5rem; }
}

/* ============ RESPONSIVE (container queries — test runner) ============ */
@container articles-block (max-width: 768px) {
    .saly-ps-articles-grid[data-saly-ps-columns="3"],
    .saly-ps-articles-grid[data-saly-ps-columns="4"] { grid-template-columns: repeat(2, 1fr); }

    .saly-ps-articles-list .saly-ps-article-card { flex-direction: column; }
    .saly-ps-articles-list .saly-ps-article-media { width: 100%; height: 180px; }
    .saly-ps-articles-list .saly-ps-article-content { padding: 0 18px 18px; }
}

@container articles-block (max-width: 640px) {
    .saly-ps-articles-grid { grid-template-columns: 1fr !important; }
    .saly-ps-articles-grid--carousel .saly-ps-article-card { width: 100% !important; }
    .saly-ps-articles-title { font-size: 1.5rem; }
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
    .saly-ps-article-card,
    .saly-ps-article-img,
    .saly-ps-article-link svg,
    .saly-ps-articles-grid,
    .saly-ps-articles-arrow {
        transition: none;
    }
    .saly-ps-article-card:hover .saly-ps-article-img { transform: none; }
}