/*
 * Resources listing and article pages.
 * Sizes and spacing come from design-system.css.
 */

/* Listing page */
.resources-container {
    max-width: var(--section-max-width);
    margin: 0 auto;
    padding: calc(var(--header-offset) + var(--section-pad-y)) var(--section-pad-x) var(--section-pad-y);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.resources-title {
    font-size: var(--font-section-title);
    font-weight: 600;
    line-height: var(--lh-section-title);
}

/* Category filters (js/resources.js) */
.resource-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.resource-filter {
    height: var(--button-height);
    padding: calc(6 * var(--px)) calc(18 * var(--px));
    border: 1px solid var(--blue-color);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--blue-color);
}

.resource-filter:hover,
.resource-filter:focus {
    background: transparent;
    color: var(--blue-color);
}

.resource-filter[aria-pressed="true"] {
    background: var(--blue-color);
    color: var(--white-color);
}

.resource-filter:focus-visible {
    outline: 2px solid var(--btn-orange-color);
    outline-offset: 3px;
}

/* The same pills as links: "jump to section" buttons on article pages */
a.resource-filter {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-button);
    font-weight: 600;
    line-height: calc(24 * var(--px));
    text-decoration: none;
}

@media (hover: hover) {
    a.resource-filter:hover {
        background: var(--blue-color);
        color: var(--white-color);
    }
}

.resource-jump-links {
    margin-bottom: var(--space-lg);
}

/* Section headings land below the fixed header */
.resource-detail-content [id] {
    scroll-margin-top: calc(var(--header-offset) + var(--space-md));
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.resource-jump-links) {
        scroll-behavior: smooth;
    }
}

.resource-filter-count {
    margin-left: calc(2 * var(--px));
    font-weight: 400;
    opacity: 0.7;
}

/* Numbered figures inside articles: full-width image with a caption below */
.resource-figure {
    margin: var(--space-lg) 0;
}

.resource-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Legend under the figure: the "Figure N." label is bold, the rest is regular */
.resource-figure figcaption {
    margin-top: var(--space-2xs);
    color: var(--muted-text-color);
    font-size: var(--font-small);
    font-weight: 400;
    line-height: var(--lh-small);
}

.resource-figure figcaption strong {
    font-weight: 600;
}

/* Cards hidden by the category filters */
.resource-card[hidden] {
    display: none;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.resource-card {
    width: 100%;
    min-width: 0;
    padding: var(--space-md);
    background: var(--card-grey-bg-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-decoration: none;
    text-wrap: wrap;
    cursor: pointer;
}

.resource-card-image-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.resource-card-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--milk-color);
}

.resource-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resource-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: calc(6 * var(--px)) var(--space-2xs);
}

.resource-card-meta > span {
    white-space: nowrap;
}

/* Category label on each card */
.resource-card-category {
    padding: calc(2 * var(--px)) calc(10 * var(--px));
    border-radius: var(--radius-pill);
    background: var(--blue-color);
    color: var(--white-color);
    font-size: var(--font-small);
    font-weight: 600;
    line-height: var(--lh-small);
}

.resource-card-date {
    color: var(--blue-color);
    font-size: var(--font-small);
    line-height: var(--lh-small);
}

.resource-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.resource-card-title {
    min-height: calc(2 * var(--lh-item-title));
    color: var(--blue-color);
    font-size: var(--font-item-title);
    font-weight: 600;
    line-height: var(--lh-item-title);
    overflow-wrap: break-word;
}

.resource-card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: var(--muted-text-color);
    font-size: var(--font-body);
    line-height: var(--lh-body);
}

/* Article pages */
.resource-detail-container {
    width: 100%;
    max-width: calc(var(--article-max-width) + 2 * var(--section-pad-x));
    margin: 0 auto;
    padding: calc(var(--header-offset) + var(--section-pad-y)) var(--section-pad-x) var(--section-pad-y);
    overflow-x: hidden;
}

.resource-detail-header {
    margin-bottom: var(--space-lg);
}

.resource-detail-title {
    margin-bottom: var(--space-sm);
    color: var(--blue-color);
    font-size: var(--font-section-title);
    font-weight: 600;
    line-height: var(--lh-section-title);
}

.resource-detail-subtitle {
    margin-bottom: var(--space-sm);
    color: var(--muted-text-color);
    font-size: var(--font-subheading);
    line-height: var(--lh-subheading);
}

.resource-detail-meta {
    margin-bottom: var(--space-lg);
    color: var(--text-color);
    font-size: var(--font-small);
    line-height: var(--lh-small);
}

.resource-detail-content {
    width: 100%;
    color: var(--text-black-color);
    font-size: var(--font-article);
    line-height: var(--lh-article);
    overflow-x: hidden;
}

.resource-detail-content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--blue-color);
    font-size: var(--font-subheading);
    font-weight: 600;
    line-height: var(--lh-subheading);
}

.resource-detail-content h4 {
    margin-top: calc(24 * var(--px));
    margin-bottom: var(--space-xs);
    color: var(--blue-color);
    font-size: var(--font-item-title);
    font-weight: 600;
    line-height: var(--lh-item-title);
}

.resource-detail-content p {
    margin-bottom: var(--space-sm);
}

/*
 * Article lists: the bullet or number sits on the paragraph's left edge and the text
 * starts a clear gap after it. Drawn with ::before so the spacing is the same everywhere.
 */
.resource-detail-content ul,
.resource-detail-content ol {
    margin-bottom: var(--space-sm);
    padding-left: 0;
    counter-reset: list-item-number;
}

.resource-detail-content li {
    margin-bottom: var(--space-2xs);
}

.resource-detail-content li.list-disc,
.resource-detail-content li.list-decimal {
    position: relative;
    padding-left: calc(20 * var(--px));
    list-style: none;
}

.resource-detail-content li.list-disc::before,
.resource-detail-content li.list-decimal::before {
    position: absolute;
    left: 0;
    top: 0;
}

/* A drawn dot: the bullet character is too small in this font */
.resource-detail-content li.list-disc::before {
    content: "";
    top: calc(var(--lh-article) / 2 - 3.5 * var(--px));
    width: calc(7 * var(--px));
    height: calc(7 * var(--px));
    border-radius: 50%;
    background: var(--blue-color);
}

.resource-detail-content li.list-decimal {
    counter-increment: list-item-number;
}

.resource-detail-content li.list-decimal::before {
    content: counter(list-item-number) ".";
    color: var(--blue-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.resource-detail-content a {
    color: var(--light-blue-color);
    text-decoration: underline;
    text-wrap: wrap;
}

.resource-detail-content a:hover {
    color: var(--btn-orange-color);
}

.resource-detail-image {
    width: 100%;
    margin: var(--space-lg) 0;
}

.resource-detail-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xs);
}

.resource-detail-video {
    position: relative;
    width: 100%;
    height: 0;
    margin: var(--space-lg) 0;
    padding-bottom: 75%;
    /* 4:3 aspect ratio, same as the PDF viewer */
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--black-color);
}

.resource-detail-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.resource-detail-pdf-viewer {
    position: relative;
    width: 100%;
    height: 0;
    margin: var(--space-lg) 0;
    padding-bottom: 75%;
    /* 4:3 aspect ratio */
    border: 1px solid var(--divider-color);
    border-radius: var(--radius-xs);
    overflow: auto;
    background: var(--milk-color);
}

.resource-detail-pdf-viewer iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.resource-detail-pdf-viewer::-webkit-scrollbar {
    width: calc(8 * var(--px));
}

.resource-detail-pdf-viewer::-webkit-scrollbar-track {
    background: var(--scrollbar-track-tint);
    border-radius: var(--radius-2xs);
}

.resource-detail-pdf-viewer::-webkit-scrollbar-thumb {
    background-color: var(--white-color);
    border-radius: var(--radius-2xs);
    border: 2px solid var(--white-faint);
}

.resource-detail-pdf-viewer::-webkit-scrollbar-thumb:hover {
    background-color: var(--btn-orange-color);
}

.resource-detail-download {
    display: inline;
    margin-top: var(--space-sm);
    padding: 0;
    background: transparent;
    color: var(--light-blue-color);
    text-decoration: underline;
    border-radius: 0;
    font-size: var(--font-article);
    font-weight: 400;
    transition: color var(--trans-fast);
}

.resource-detail-download:hover {
    background: transparent;
    color: var(--btn-orange-color);
}

.resource-back-link {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--px));
    margin-bottom: var(--space-md);
    color: var(--blue-color);
    font-size: var(--font-body);
    font-weight: 500;
    transition: color var(--trans-fast);
}

.resource-back-link:hover {
    color: var(--btn-orange-color);
}

.resource-back-link svg {
    width: calc(16 * var(--px));
    height: calc(16 * var(--px));
}

.coming-soon-badge {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: calc(4 * var(--px)) calc(10 * var(--px));
    border-radius: var(--radius-2xs);
    background: var(--btn-orange-color);
    color: var(--white-color);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
}

@media (width < 992px) {
    .resource-detail-pdf-viewer,
    .resource-detail-video {
        padding-bottom: 80%;
    }
}

@media (width < 900px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width < 768px) {
    .resource-detail-pdf-viewer,
    .resource-detail-video {
        padding-bottom: 100%;
    }
}

@media (width < 600px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }
}

@media (width < 480px) {
    .resource-detail-pdf-viewer,
    .resource-detail-video {
        padding-bottom: 120%;
        margin: calc(24 * var(--px)) 0;
    }
}