/* ===========================================================================
   ETheme DP — Loop styles
   ---------------------------------------------------------------------------
   One visual contract for all loop cards. A loop template owns its markup;
   this file owns shared tokens, motion, focus states and responsive behaviour.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Shared card contract
   --------------------------------------------------------------------------- */
.eth-loop {
    --eth-loop-border: color-mix(in srgb, var(--eth-border) 86%, transparent);
    --eth-loop-border-active: color-mix(in srgb, var(--eth-primary) 38%, var(--eth-border));
    --eth-loop-radius: clamp(0.75rem, 1.25vw, 1rem);
    --eth-loop-radius-media: clamp(0.625rem, 1vw, 0.875rem);
    --eth-loop-surface: var(--eth-bg-surface);
    --eth-loop-muted: var(--eth-bg-muted);
    --eth-loop-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    --eth-loop-shadow-hover: 0 14px 32px rgba(15, 23, 42, 0.09);
    --eth-loop-image-scale: 1.025;
    --eth-loop-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --eth-loop-focus: color-mix(in srgb, var(--eth-primary) 42%, transparent);
    --eth-loop-overlay: rgba(13, 22, 30, 0.64);
    --eth-loop-overlay-fade: rgba(13, 22, 30, 0.18);
    /* 卡片族 meta/eyebrow 微字号：低于全局阶梯下限 fs-xs(0.78rem)，
       属 loop 视觉契约，与 --eth-loop-radius/ease 同级单源；0.72rem 归一至 0.7rem。 */
    --eth-loop-meta-fs: 0.7rem;
}

/* The archive main column is the responsive reference. This keeps a sidebar
   layout from squeezing a desktop column preset into unusably narrow cards. */
.eth-loop-layout__main {
    container: eth-loop-main / inline-size;
}

.eth-loop-grid {
    display: grid;
    gap: var(--eth-space-s);
}

.eth-loop-grid.eth-loop-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.eth-loop-grid.eth-loop-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eth-loop-grid.eth-loop-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eth-loop-grid.eth-loop-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eth-loop-grid.eth-loop-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.eth-loop,
.eth-loop * {
    box-sizing: border-box;
}

.eth-loop-card,
.eth-catalog-card,
.eth-insight-card,
.eth-post-item--post-1,
.eth-story-card,
.eth-editorial-card,
.eth-brief-card {
    min-width: 0;
}

.eth-loop-card__link,
.eth-catalog-card__media,
.eth-catalog-card__title a,
.eth-insight-card__media,
.eth-insight-card__title a,
.eth-story-card__media,
.eth-story-card__title a,
.eth-editorial-card__media,
.eth-editorial-card__title a,
.eth-brief-card__title a,
.eth-post-item--post-1 a,
.eth-card-link {
    color: inherit;
    text-decoration: none;
}

.eth-loop-card__link {
    display: block;
    height: 100%;
}

.eth-loop-card__image-wrap,
.eth-catalog-card__media,
.eth-insight-card__media,
.eth-story-card__media,
.eth-editorial-card__media,
.eth-post-item--post-1 .eth-post-item__media {
    overflow: hidden;
    background: var(--eth-loop-muted);
}

.eth-loop-card__image,
.eth-catalog-card__image,
.eth-insight-card__image,
.eth-story-card__image,
.eth-editorial-card__image,
.eth-post-item--post-1 .eth-post-item__image {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 420ms var(--eth-loop-ease), filter 240ms ease;
}

/* Product photography is specification evidence: preserve the full square
   asset. Editorial post imagery may crop intentionally to keep its rhythm. */
.eth-loop-card__image,
.eth-catalog-card__image {
    object-fit: contain;
}

.eth-insight-card__image,
.eth-story-card__image,
.eth-editorial-card__image,
.eth-catalog-card--content-post .eth-catalog-card__image,
.eth-post-item--post-1 .eth-post-item__image {
    object-fit: cover;
}

.eth-loop-card__title,
.eth-catalog-card__title,
.eth-insight-card__title,
.eth-story-card__title,
.eth-editorial-card__title,
.eth-brief-card__title,
.eth-post-item--post-1 .eth-post-item__title {
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-break: normal;
}

.eth-loop-card__excerpt,
.eth-catalog-card__excerpt,
.eth-insight-card__excerpt,
.eth-story-card__excerpt,
.eth-editorial-card__excerpt,
.eth-brief-card__excerpt,
.eth-post-item--post-1 .eth-post-item__excerpt {
    color: var(--eth-text-muted);
    font-size: var(--eth-fs-small);
    line-height: var(--eth-lh-body);
}

.eth-loop-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background:
        linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--eth-border) 70%, transparent) 46% 54%, transparent 54%),
        color-mix(in srgb, var(--eth-loop-muted) 90%, #fff);
    background-size: 32px 32px;
}

.eth-loop-card__link:focus-visible,
.eth-catalog-card a:focus-visible,
.eth-insight-card a:focus-visible,
.eth-story-card a:focus-visible,
.eth-editorial-card a:focus-visible,
.eth-brief-card a:focus-visible,
.eth-post-item--post-1 a:focus-visible,
.eth-card-link:focus-visible {
    outline: 3px solid var(--eth-loop-focus);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   2. Product 1 — minimal directory
   --------------------------------------------------------------------------- */
.eth-loop-card--product-1 .eth-loop-card__image-wrap {
    aspect-ratio: 1;
    border-radius: var(--eth-loop-radius-media);
}

.eth-loop-card--product-1 .eth-loop-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-body);
    font-weight: var(--eth-fw-medium);
    line-height: 1.4;
    text-align: center;
    transition: color 180ms ease;
}

.eth-loop-card--product-1:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-loop-card--product-1:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   3. Product 2 — light information card
   --------------------------------------------------------------------------- */
.eth-loop-card--product-2 {
    overflow: hidden;
    border: 1px solid var(--eth-loop-border);
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-loop-card--product-2 .eth-loop-card__image-wrap {
    aspect-ratio: 1;
}

.eth-loop-card--product-2 .eth-loop-card__body {
    padding: clamp(0.9rem, 1.5vw, 1.2rem);
}

.eth-loop-card--product-2 .eth-loop-card__title {
    margin: 0;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-body);
    font-weight: var(--eth-fw-semibold);
    line-height: 1.35;
    transition: color 180ms ease;
}

.eth-loop-card--product-2 .eth-loop-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.eth-loop-card--product-2:focus-within {
    border-color: var(--eth-loop-border-active);
    box-shadow: var(--eth-loop-shadow-hover);
}

.eth-loop-card--product-2:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-loop-card--product-2:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   4. Product 3 — soft image overlay
   --------------------------------------------------------------------------- */
.eth-loop-card--product-3 {
    overflow: hidden;
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-muted);
}

.eth-loop-card--product-3 .eth-loop-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
}

.eth-loop-card--product-3 .eth-loop-card__overlay {
    position: absolute;
    inset: 40% 0 0;
    display: flex;
    align-items: flex-end;
    padding: clamp(0.85rem, 1.8vw, 1.25rem);
    background: linear-gradient(to top, var(--eth-loop-overlay) 0%, var(--eth-loop-overlay-fade) 66%, transparent 100%);
}

.eth-loop-card--product-3 .eth-loop-card__title {
    margin: 0;
    color: var(--eth-light);
    font-size: clamp(1rem, 1.1vw, 1.16rem);
    font-weight: var(--eth-fw-semibold);
    line-height: 1.35;
}

.eth-loop-card--product-3:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

/* ---------------------------------------------------------------------------
   5. Product 4 — editorial catalogue (existing dedicated markup)
   --------------------------------------------------------------------------- */
.eth-catalog-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--eth-loop-border);
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-catalog-card__media {
    display: block;
    aspect-ratio: 1;
}

.eth-catalog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1rem, 1.8vw, 1.35rem);
}

.eth-catalog-card__eyebrow {
    display: flex;
    min-height: 1.3em;
    align-items: center;
    justify-content: space-between;
    gap: var(--eth-space-2xs);
    margin-bottom: var(--eth-space-3xs);
    color: var(--eth-text-muted);
    font-size: var(--eth-loop-meta-fs);
    font-weight: var(--eth-fw-semibold);
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.eth-catalog-card__eyebrow a {
    color: var(--eth-primary);
}

.eth-catalog-card__title,
.eth-insight-card__title {
    margin: 0;
    font-size: clamp(1.04rem, 1.4vw, 1.25rem);
    font-weight: 650;
    line-height: 1.34;
    letter-spacing: -0.012em;
}

.eth-catalog-card__title a,
.eth-insight-card__title a {
    color: var(--eth-text-title);
    transition: color 180ms ease;
}

.eth-catalog-card__excerpt,
.eth-insight-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 var(--eth-space-xs);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.eth-card-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--eth-space-3xs);
    margin-top: auto;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-small);
    font-weight: var(--eth-fw-semibold);
    transition: color 180ms ease;
}

.eth-card-link svg {
    width: 1.1rem;
    transition: transform 200ms var(--eth-loop-ease);
}

.eth-catalog-card:focus-within {
    border-color: var(--eth-loop-border-active);
    box-shadow: var(--eth-loop-shadow-hover);
}

.eth-catalog-card:focus-within .eth-catalog-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

/* ---------------------------------------------------------------------------
   6. Product 5 — alternate gallery image
   --------------------------------------------------------------------------- */
.eth-loop-card--product-5 .eth-loop-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--eth-loop-radius-media);
}

.eth-loop-card--product-5 .eth-loop-card__image {
    position: absolute;
    inset: 0;
    transition: opacity 240ms ease;
}

.eth-loop-card--product-5 .eth-loop-card__image--main {
    opacity: 1;
}

.eth-loop-card--product-5 .eth-loop-card__image--hover {
    opacity: 0;
}

.eth-loop-card--product-5 .eth-loop-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: var(--eth-fs-body);
    font-weight: var(--eth-fw-medium);
    line-height: 1.4;
    text-align: center;
    transition: color 180ms ease;
}

.eth-loop-card--product-5.has-hover-image:focus-within .eth-loop-card__image--main {
    opacity: 0;
}

.eth-loop-card--product-5.has-hover-image:focus-within .eth-loop-card__image--hover {
    opacity: 1;
}

.eth-loop-card--product-5:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   7. Product 6 — relaxed editorial image and copy
   --------------------------------------------------------------------------- */
.eth-loop-card--product-6 .eth-loop-card__image-wrap {
    aspect-ratio: 1;
    border-radius: var(--eth-loop-radius-media);
}

.eth-loop-card--product-6 .eth-loop-card__caption {
    padding: clamp(0.75rem, 1.25vw, 1rem) 0.1rem 0;
}

.eth-loop-card--product-6 .eth-loop-card__title {
    margin: 0;
    color: var(--eth-text-title);
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    font-weight: 650;
    line-height: 1.35;
    transition: color 180ms ease;
}

.eth-loop-card--product-6 .eth-loop-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.eth-loop-card--product-6:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-loop-card--product-6:focus-within .eth-loop-card__title {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   8. Product 7 — hover info slides up
   Default: image with the title overlaid on the bottom over a full-image
   tint. On hover/focus the tint deepens, the title moves up and the excerpt
   slides in below it. Touch devices always show the excerpt.
   --------------------------------------------------------------------------- */
.eth-loop-card--product-7 {
    overflow: hidden;
    border: 1px solid var(--eth-loop-border);
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-loop-card--product-7 .eth-loop-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
}

/* Full-image tint: subtle by default, deepens on hover for legibility. */
.eth-loop-card--product-7 .eth-loop-card__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.22) 55%, rgba(15, 23, 42, 0.08));
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 600ms var(--eth-loop-ease);
}

.eth-loop-card--product-7 .eth-loop-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* 确保在 image-wrap::after 渐变遮罩之上 */
    padding: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--eth-text-invert);
}

.eth-loop-card--product-7 .eth-loop-card__title {
    margin: 0;
    color: #fff; /* 标题保持纯白 */
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: var(--eth-fw-semibold);
    line-height: 1.35;
    transition: transform 800ms var(--eth-loop-ease);
}

/* Reveal panel: hidden below the title; on hover/focus the title drifts up
   and the excerpt slides in beneath it. */
.eth-loop-card--product-7 .eth-loop-card__reveal {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: max-height 800ms var(--eth-loop-ease), opacity 600ms ease, transform 800ms var(--eth-loop-ease);
}

.eth-loop-card--product-7 .eth-loop-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--eth-text-invert);
    opacity: 0.92;
}

.eth-loop-card--product-7:hover .eth-loop-card__title,
.eth-loop-card--product-7:focus-within .eth-loop-card__title {
    transform: translateY(-8px);
}

.eth-loop-card--product-7:hover .eth-loop-card__reveal,
.eth-loop-card--product-7:focus-within .eth-loop-card__reveal {
    max-height: 12rem;
    opacity: 1;
    transform: translateY(0);
}

.eth-loop-card--product-7:hover .eth-loop-card__image-wrap::after,
.eth-loop-card--product-7:focus-within .eth-loop-card__image-wrap::after {
    opacity: 1;
    transition: opacity 800ms var(--eth-loop-ease);
}

.eth-loop-card--product-7:focus-within {
    border-color: var(--eth-loop-border-active);
    box-shadow: var(--eth-loop-shadow-hover);
}

.eth-loop-card--product-7:focus-within .eth-loop-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

/* Touch devices (no hover): always show the reveal panel. */
@media (hover: none) {
    .eth-loop-card--product-7 .eth-loop-card__reveal {
        max-height: 12rem;
        opacity: 1;
        transform: none;
    }
    .eth-loop-card--product-7 .eth-loop-card__title {
        transform: translateY(-4px);
    }
}

/* ---------------------------------------------------------------------------
   9. Post 1 — media list
   --------------------------------------------------------------------------- */
.eth-loop--post-1 {
    display: grid;
    gap: var(--eth-space-l);
}

.eth-post-item--post-1 {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: 0 0 var(--eth-space-l);
    border-bottom: 1px solid var(--eth-loop-border);
}

.eth-post-item--post-1:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.eth-post-item--post-1 .eth-post-item__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--eth-loop-radius-media);
}

.eth-post-item--post-1 .eth-post-item__media > a {
    display: block;
    height: 100%;
}

.eth-post-item--post-1 .eth-post-item__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.eth-post-item--post-1 .eth-post-item__categories,
.eth-post-item--post-1 .eth-post-item__meta {
    color: var(--eth-text-muted);
    font-size: var(--eth-loop-meta-fs);
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.eth-post-item--post-1 .eth-post-item__categories a {
    color: var(--eth-primary);
}

.eth-post-item--post-1 .eth-post-item__title {
    margin: var(--eth-space-3xs) 0 0;
    color: var(--eth-text-title);
    font-size: clamp(1.1rem, 1.55vw, 1.3rem);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.eth-post-item--post-1 .eth-post-item__title a {
    color: inherit;
    transition: color 180ms ease;
}

.eth-post-item--post-1 .eth-post-item__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.eth-post-item--post-1 .eth-post-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eth-space-2xs);
}

.eth-post-item--post-1:focus-within .eth-post-item__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-post-item--post-1:focus-within .eth-post-item__title a {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   10. Post 3 — insight grid
   --------------------------------------------------------------------------- */
.eth-loop--post-3 {
    display: grid;
    gap: var(--eth-space-l);
}

.eth-insight-card {
    display: flex;
    flex-direction: column;
}

.eth-insight-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--eth-loop-radius-media);
}

.eth-insight-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.9rem 0.1rem 0.2rem;
}

.eth-insight-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eth-space-2xs);
    margin-bottom: var(--eth-space-3xs);
    color: var(--eth-text-muted);
    font-size: var(--eth-loop-meta-fs);
    font-weight: var(--eth-fw-medium);
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.eth-insight-card__categories {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eth-insight-card__categories a {
    color: var(--eth-primary);
    text-decoration: none;
}

.eth-insight-card__title a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: color 180ms ease, background-size 240ms var(--eth-loop-ease);
}

.eth-insight-card:focus-within .eth-insight-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-insight-card:focus-within .eth-insight-card__title a {
    color: var(--eth-primary);
    background-size: 100% 1px;
}

/* ---------------------------------------------------------------------------
   11. Post 2 — horizontal magazine cards
   --------------------------------------------------------------------------- */
.eth-story-card {
    display: grid;
    min-height: 100%;
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--eth-loop-border);
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-story-card__media {
    display: block;
    min-height: 100%;
}

.eth-story-card__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(0.9rem, 1.7vw, 1.3rem);
}

.eth-story-card__meta,
.eth-editorial-card__meta,
.eth-brief-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eth-space-2xs);
    color: var(--eth-text-muted);
    font-size: var(--eth-loop-meta-fs);
    font-weight: var(--eth-fw-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.eth-story-card__meta a,
.eth-editorial-card__meta a,
.eth-brief-card__meta a {
    color: var(--eth-primary);
    text-decoration: none;
}

.eth-story-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.35;
}

.eth-story-card__title a,
.eth-editorial-card__title a,
.eth-brief-card__title a {
    transition: color 180ms ease;
}

.eth-story-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.eth-story-card .eth-card-link {
    margin-top: var(--eth-space-2xs);
}

.eth-story-card:focus-within,
.eth-brief-card:focus-within {
    border-color: var(--eth-loop-border-active);
    box-shadow: var(--eth-loop-shadow-hover);
}

.eth-story-card:focus-within .eth-story-card__image,
.eth-editorial-card:focus-within .eth-editorial-card__image {
    transform: scale(var(--eth-loop-image-scale));
}

.eth-story-card:focus-within .eth-story-card__title a,
.eth-editorial-card:focus-within .eth-editorial-card__title a,
.eth-brief-card:focus-within .eth-brief-card__title a {
    color: var(--eth-primary);
}

/* ---------------------------------------------------------------------------
   12. Post 4 — editorial feature cards
   --------------------------------------------------------------------------- */
.eth-editorial-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding-bottom: var(--eth-space-s);
    border-bottom: 1px solid var(--eth-loop-border);
}

.eth-editorial-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--eth-loop-radius-media);
}

.eth-editorial-card__body {
    padding: 1rem 0.1rem 0;
}

.eth-editorial-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: clamp(1.12rem, 1.55vw, 1.4rem);
    line-height: 1.3;
    letter-spacing: -0.018em;
}

.eth-editorial-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ---------------------------------------------------------------------------
   13. Post 5 — compact text directory
   --------------------------------------------------------------------------- */
.eth-brief-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--eth-loop-border);
    border-top: 3px solid color-mix(in srgb, var(--eth-primary) 52%, var(--eth-border));
    border-radius: var(--eth-loop-radius);
    background: var(--eth-loop-surface);
    box-shadow: var(--eth-loop-shadow);
    transition: border-color 200ms ease, box-shadow 260ms var(--eth-loop-ease);
}

.eth-brief-card__title {
    margin: var(--eth-space-2xs) 0 0;
    color: var(--eth-text-title);
    font-size: clamp(1.05rem, 1.4vw, 1.28rem);
    line-height: 1.34;
}

.eth-brief-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--eth-space-2xs) 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.eth-brief-card .eth-card-link {
    margin-top: auto;
    padding-top: var(--eth-space-2xs);
}

/* ---------------------------------------------------------------------------
   14. Pointer hover: restrained and never required for comprehension
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .eth-loop-card--product-1:hover .eth-loop-card__image,
    .eth-loop-card--product-2:hover .eth-loop-card__image,
    .eth-loop-card--product-3:hover .eth-loop-card__image,
    .eth-loop-card--product-6:hover .eth-loop-card__image,
    .eth-loop-card--product-7:hover .eth-loop-card__image,
    .eth-catalog-card:hover .eth-catalog-card__image,
    .eth-post-item--post-1:hover .eth-post-item__image,
    .eth-insight-card:hover .eth-insight-card__image,
    .eth-story-card:hover .eth-story-card__image,
    .eth-editorial-card:hover .eth-editorial-card__image {
        transform: scale(var(--eth-loop-image-scale));
    }

    .eth-loop-card--product-1:hover .eth-loop-card__title,
    .eth-loop-card--product-2:hover .eth-loop-card__title,
    .eth-loop-card--product-6:hover .eth-loop-card__title,
    .eth-loop-card--product-7:hover .eth-loop-card__title,
    .eth-post-item--post-1:hover .eth-post-item__title a,
    .eth-catalog-card:hover .eth-catalog-card__title a,
    .eth-insight-card:hover .eth-insight-card__title a,
    .eth-story-card:hover .eth-story-card__title a,
    .eth-editorial-card:hover .eth-editorial-card__title a,
    .eth-brief-card:hover .eth-brief-card__title a,
    .eth-card-link:hover {
        color: var(--eth-primary);
    }

    .eth-loop-card--product-2:hover,
    .eth-loop-card--product-7:hover,
    .eth-catalog-card:hover,
    .eth-story-card:hover,
    .eth-brief-card:hover {
        border-color: var(--eth-loop-border-active);
        box-shadow: var(--eth-loop-shadow-hover);
    }

    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--main {
        opacity: 0;
    }

    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--hover {
        opacity: 1;
    }

    .eth-loop-card--product-5:hover .eth-loop-card__title {
        color: var(--eth-primary);
    }

    .eth-insight-card:hover .eth-insight-card__title a {
        background-size: 100% 1px;
    }

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

/* ---------------------------------------------------------------------------
   15. Slider
   --------------------------------------------------------------------------- */
.eth-slider {
    position: relative;
}

.eth-slider--active .eth-loop > * {
    width: min(72vw, 340px);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   16. Responsive and motion safety
   --------------------------------------------------------------------------- */
@container eth-loop-main (max-width: 1100px) {
    .eth-loop-grid.eth-loop-grid--5 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container eth-loop-main (max-width: 900px) {
    .eth-loop-grid.eth-loop-grid--4,
    .eth-loop-grid.eth-loop-grid--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container eth-loop-main (max-width: 720px) {
    .eth-loop-grid.eth-loop-grid--3,
    .eth-loop-grid.eth-loop-grid--4,
    .eth-loop-grid.eth-loop-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container eth-loop-main (max-width: 560px) {
    .eth-loop-grid.eth-loop-grid--2,
    .eth-loop-grid.eth-loop-grid--3,
    .eth-loop-grid.eth-loop-grid--4,
    .eth-loop-grid.eth-loop-grid--5 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    /* Viewport fallback for Loop use outside the category container. */
    .eth-loop-grid.eth-loop-grid--4,
    .eth-loop-grid.eth-loop-grid--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .eth-post-item--post-1 {
        grid-template-columns: minmax(160px, 32%) minmax(0, 1fr);
    }

    .eth-slider--active .eth-loop > * {
        width: min(76vw, 320px);
    }
}

@media (max-width: 600px) {
    .eth-loop {
        --eth-loop-radius: 0.75rem;
    }

    .eth-loop-grid.eth-loop-grid--2,
    .eth-loop-grid.eth-loop-grid--3,
    .eth-loop-grid.eth-loop-grid--4,
    .eth-loop-grid.eth-loop-grid--5 {
        grid-template-columns: 1fr;
    }

    .eth-post-item--post-1 {
        grid-template-columns: 1fr;
    }

    .eth-story-card {
        grid-template-columns: 1fr;
    }

    .eth-story-card__media {
        aspect-ratio: 3 / 2;
    }

    .eth-story-card__meta,
    .eth-editorial-card__meta,
    .eth-brief-card__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .eth-post-item--post-1 .eth-post-item__media {
        max-width: none;
    }

    .eth-slider--active .eth-loop > * {
        width: min(84vw, 340px);
    }

}

@media (hover: none) {
    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--main {
        opacity: 1;
    }

    .eth-loop-card--product-5.has-hover-image:hover .eth-loop-card__image--hover {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eth-loop *,
    .eth-loop *::before,
    .eth-loop *::after,
    .eth-slider *,
    .eth-slider *::before,
    .eth-slider *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}