/* ==========================================================================
   Ethantheme - Category Page Styles
   B2B/SaaS aesthetic, flat design system
   Uses theme CSS variables (--eth-* prefix)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Generic Section
   -------------------------------------------------------------------------- */

/* Category layout contract.  Keep page-specific dimensions in one place so
   the template can be tuned without scattering literals through selectors. */
.eth-category-main {
    --eth-category-sidebar-width: 300px;
    --eth-category-sidebar-gap: var(--eth-space-xs);
    --eth-category-contact-label-width: 100px;
    --eth-category-pagination-size: 42px;
    --eth-category-pagination-padding: var(--eth-space-2xs) var(--eth-space-xs);
    --eth-category-pagination-radius: var(--eth-radius-s);
    --eth-category-pagination-transition:
        color var(--eth-transition-s),
        background-color var(--eth-transition-s),
        border-color var(--eth-transition-s),
        transform var(--eth-transition-m),
        box-shadow var(--eth-transition-m);
}

.eth-section__title {
    font-size: calc(var(--eth-fs-h2) * var(--eth-template-section-scale, 1));
    font-weight: var(--eth-fw-semibold);
    color: var(--eth-text-title);
    margin-bottom: var(--eth-space-m);
    line-height: var(--eth-lh-heading);
}

/* --------------------------------------------------------------------------
   2. Breadcrumb
   -------------------------------------------------------------------------- */
.eth-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--eth-space-2xs);
    font-size: var(--eth-fs-small);
    color: var(--eth-text-muted);
    margin-bottom: var(--eth-space-m);
}
.eth-breadcrumb a {
    color: var(--eth-text-muted);
    text-decoration: none;
    transition: color var(--eth-transition-s);
}
.eth-breadcrumb a:hover {
    color: var(--eth-primary);
}
.eth-breadcrumb__sep {
    opacity: 0.5;
}
.eth-breadcrumb__current {
    color: var(--eth-text-title);
    font-weight: var(--eth-fw-medium);
}

/* --------------------------------------------------------------------------
   4. Hero Module
   -------------------------------------------------------------------------- */
.eth-hero {
    padding-top: var(--eth-space-xl);
}
.eth-hero__grid {
    align-items: center;
}
.eth-hero__title {
    font-size: calc(var(--eth-fs-h1) * var(--eth-template-title-scale, 0.8));
    font-weight: var(--eth-fw-bold);
    color: var(--eth-text-title);
    line-height: var(--eth-lh-tight);
    margin-bottom: var(--eth-space-xs);
}
.eth-hero__subtitle {
    font-size: calc(var(--eth-fs-h4) * var(--eth-template-description-scale, 1));
    font-weight: var(--eth-fw-regular);
    color: var(--eth-text-muted);
    margin-bottom: var(--eth-space-2xs);
}
.eth-hero__content > p {
    color: var(--eth-text-body);
    line-height: var(--eth-lh-body);
    margin-bottom: var(--eth-space-xs);
}

.eth-hero__content > p:last-of-type {
    margin-bottom: 0;
}
.eth-hero__content > ul,
.eth-hero__content > ol {
    max-width: 60ch;
    padding-inline-start: 1.35em;
    margin: 0 0 var(--eth-space-m);
    display: grid;
    gap: var(--eth-space-2xs);
    color: var(--eth-text-body);
    line-height: var(--eth-lh-body);
}
.eth-hero__content > ul li::marker,
.eth-hero__content > ol li::marker {
    color: var(--eth-link);
    font-weight: var(--eth-fw-semibold);
}
.eth-hero__media {
    border-radius: var(--eth-radius-l);
    overflow: hidden;
    box-shadow: var(--eth-shadow-l);
}
.eth-hero__media img,
.eth-hero__media video {
    width: 100%;
    height: auto;
    display: block;
}
.eth-hero__actions {
    margin-top: var(--eth-space-l);
}

/* ==========================================================================
   Hero 布局变体
   --------------------------------------------------------------------------
   布局：split / minimal / cover
   Minimal 对齐：minimal-align-center / minimal-align-left / minimal-align-right
   媒体位置：media-left / media-right
   图片墙：gallery--cols-2 / gallery--cols-3
   背景样式：见 section-backgrounds.css（eth-hero--bg-*）
   ========================================================================== */

/* 简洁标题：保留完整内容能力，不输出空媒体列；内容铺满标准容器。 */
.eth-hero--layout-minimal .eth-hero__grid--single {
    display: block;
}
.eth-hero--layout-minimal .eth-hero__content {
    width: 100%;
    max-width: none;
    text-align: center;
}
.eth-hero--layout-minimal .eth-hero__title,
.eth-hero--layout-minimal .eth-hero__subtitle,
.eth-hero--layout-minimal .eth-hero__content > p,
.eth-hero--layout-minimal .eth-hero__content > ul,
.eth-hero--layout-minimal .eth-hero__content > ol {
    width: 100%;
    max-width: none;
}
.eth-hero--layout-minimal .eth-hero__actions {
    justify-content: center;
}
.eth-hero--minimal-align-left .eth-hero__content {
    text-align: left;
}
.eth-hero--minimal-align-left .eth-hero__actions {
    justify-content: flex-start;
}
.eth-hero--minimal-align-right .eth-hero__content {
    text-align: right;
}
.eth-hero--minimal-align-right .eth-hero__actions {
    justify-content: flex-end;
}

/* Cover：响应式图片作为装饰背景，固定遮罩保证文字对比度。 */
.eth-hero.eth-hero--layout-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(27rem, 52vw, 43rem);
    overflow: hidden;
    background: var(--eth-bg-surface);
}
.eth-hero--layout-cover::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--eth-dark) 84%, transparent) 0%, color-mix(in srgb, var(--eth-dark) 68%, transparent) 52%, color-mix(in srgb, var(--eth-dark) 42%, transparent) 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--eth-primary) 18%, transparent), transparent 58%);
    pointer-events: none;
}
.eth-hero--layout-cover.eth-hero--cover-no-image {
    background:
        radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--eth-primary) 45%, transparent), transparent 34rem),
        linear-gradient(135deg, var(--eth-bg-surface), color-mix(in srgb, var(--eth-primary) 24%, var(--eth-bg-surface)));
}
.eth-hero--layout-cover > .eth-container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.eth-hero__backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
}
.eth-hero__cover-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}
.eth-hero--cover-position-top .eth-hero__cover-image { object-position: center top; }
.eth-hero--cover-position-bottom .eth-hero__cover-image { object-position: center bottom; }
.eth-hero--cover-position-left .eth-hero__cover-image { object-position: left center; }
.eth-hero--cover-position-right .eth-hero__cover-image { object-position: right center; }
.eth-hero--layout-cover .eth-hero__grid--single {
    display: block;
}
.eth-hero--layout-cover .eth-hero__content {
    max-width: 52rem;
}
/* 媒体位置 */
.eth-hero--media-left .eth-hero__grid {
    grid-template-areas: "media content";
}
.eth-hero--media-left .eth-hero__content {
    grid-area: content;
}
.eth-hero--media-left .eth-hero__media {
    grid-area: media;
}

/* 图片墙 */
.eth-hero__gallery {
    display: grid;
    gap: var(--eth-space-s);
}
.eth-hero__gallery--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.eth-hero__gallery--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.eth-hero__gallery-img {
    width: 100%;
    height: auto;
    border-radius: var(--eth-radius-m);
    display: block;
    object-fit: cover;
}

/* 移动端：媒体位置还原为默认（内容在上） */
@media (max-width: 992px) {
    .eth-hero--media-left .eth-hero__grid {
        grid-template-areas: initial;
    }
    .eth-hero--layout-cover {
        min-height: clamp(25rem, 76vw, 36rem);
    }
}

/* --------------------------------------------------------------------------
   5. Button Group
   --------------------------------------------------------------------------
   Button visuals belong to components.css. Category CSS only controls the
   group layout so Cover and other Hero variants share the global component.
   -------------------------------------------------------------------------- */
.eth-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eth-space-s);
}

/* --------------------------------------------------------------------------
   6. Image-Text Module (modules 2/3/6/7)
   -------------------------------------------------------------------------- */
.eth-image-text__media {
    border-radius: var(--eth-radius-l);
    overflow: hidden;
    box-shadow: var(--eth-shadow-m);
}
.eth-image-text__media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--eth-transition-l);
}
.eth-image-text__media:hover img {
    transform: scale(1.03);
}
.eth-image-text__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eth-image-text__content > p {
    color: var(--eth-text-body);
    line-height: var(--eth-lh-body);
}
.eth-image-text__actions {
    margin-top: var(--eth-space-m);
}

/* --------------------------------------------------------------------------
   7. Custom HTML Module (modules 4/8)
   -------------------------------------------------------------------------- */
.eth-custom-html {
    background: transparent;
}


/* --------------------------------------------------------------------------
   8. Loop Section Layout (with sidebar)
   -------------------------------------------------------------------------- */
.eth-loop-section {
    background: var(--eth-bg-body);
}
.eth-loop-layout {
    display: grid;
    gap: var(--eth-space-l);
}
/* Sidebar moved to the left: 300px sidebar column first, main content second. */
.eth-loop-layout--with-sidebar {
    grid-template-columns: var(--eth-category-sidebar-width) 1fr;
}
.eth-loop-layout--with-sidebar .eth-loop-layout__main {
    min-width: 0;
    order: 2;
}
.eth-loop-layout--with-sidebar .eth-loop-layout__sidebar {
    order: 1;
}
.eth-loop-layout__sidebar {
    /* 0.7.5：移除卡片样式（边框/背景/内边距/阴影），
       避免与内部 .eth-widget 卡片形成双重边框/背景。 */
    display: flex;
    flex-direction: column;
    gap: var(--eth-category-sidebar-gap);
    align-self: start;
    position: sticky;
    top: var(--eth-space-l);
}
@media (max-width: 992px) {
    .eth-loop-layout--with-sidebar {
        grid-template-columns: 1fr;
    }
    .eth-loop-layout--with-sidebar .eth-loop-layout__main,
    .eth-loop-layout--with-sidebar .eth-loop-layout__sidebar {
        order: 0;
    }
    .eth-loop-layout__sidebar {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   9. Sidebar Widgets
   -------------------------------------------------------------------------- */
.eth-widget {
    margin-bottom: var(--eth-space-m);
}
.eth-widget:last-child {
    margin-bottom: 0;
}
.eth-widget__title {
    font-size: var(--eth-fs-h4);
    font-weight: var(--eth-fw-semibold);
    color: var(--eth-text-title);
    margin-bottom: var(--eth-space-s);
    padding-bottom: var(--eth-space-2xs);
    border-bottom: 1px solid var(--eth-border);
}
.eth-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.eth-widget li {
    margin-bottom: var(--eth-space-2xs);
}
.eth-widget a {
    color: var(--eth-text-body);
    text-decoration: none;
    transition: color var(--eth-transition-s);
}
.eth-widget a:hover {
    color: var(--eth-primary);
}

/* --------------------------------------------------------------------------
   10. Contact Module
   -------------------------------------------------------------------------- */
.eth-contact {
    background: var(--eth-bg-surface);
}
.eth-contact__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eth-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--eth-space-2xs);
}
.eth-contact-info li {
    display: flex;
    gap: var(--eth-space-s);
    font-size: var(--eth-fs-body);
    color: var(--eth-text-body);
}
.eth-contact-info strong {
    color: var(--eth-text-title);
    min-width: var(--eth-category-contact-label-width);
}
.eth-contact-info a {
    color: var(--eth-primary);
    text-decoration: none;
}
.eth-contact-info a:hover {
    text-decoration: underline;
}
.eth-contact .eth-social-links {
    margin-top: var(--eth-space-m);
}

/* --------------------------------------------------------------------------
   11. Responsive Supplements
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .eth-hero .eth-btn {
        width: 100%;
    }
    .eth-btn-group {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   11. Gradient utility classes for custom HTML modules (module 4 / 8)
   Apply by adding the class to the section or container in the wysiwyg content.
   -------------------------------------------------------------------------- */
.eth-custom-html.eth-bg-grad-1 {
    background: linear-gradient(135deg, var(--eth-primary-5), var(--eth-primary-10));
}
.eth-custom-html.eth-bg-grad-2 {
    background: linear-gradient(135deg, var(--eth-tertiary-5), var(--eth-primary-10));
}
.eth-custom-html.eth-bg-grad-3 {
    background: linear-gradient(135deg, var(--eth-bg-muted), var(--eth-light));
}
.eth-custom-html.eth-bg-grad-4 {
    background: linear-gradient(135deg, var(--eth-secondary-5), var(--eth-primary-10));
}

/* =========================================================
 * 0.9.1：从 polish.css 迁移（分类页整体细节）
 * ========================================================= */
/* --- 4. 分类页整体细节 --- */

/* Hero 媒体：柔和投影 + 圆角统一，图片入场已由入场动画负责 */
.eth-hero__media,
.eth-image-text__media {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--eth-light) 78%, transparent);
    box-shadow: var(--eth-premium-shadow-md);
    border-radius: clamp(1rem, 2vw, 1.4rem);
}

/* 图文模块媒体 hover 缩放更顺滑 */
.eth-image-text__media img {
    transition: transform 900ms var(--eth-premium-ease);
}

/* 分类页 loop 区背景：统一轻微氛围，与相邻区段区分 */
.eth-loop-section {
    background:
        radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--eth-primary) 4.5%, transparent), transparent 46%),
        var(--eth-bg-body);
}

/* 侧边栏：与 0.6.2 卡片语言统一 */
.eth-loop-layout__sidebar {
    border: 1px solid var(--eth-premium-border);
    border-radius: 1rem;
    box-shadow: var(--eth-premium-shadow-sm);
}

/* 分页：胶囊化 + hover 上浮 */
.navigation.pagination .page-numbers {
    display: inline-grid;
    min-width: var(--eth-category-pagination-size);
    min-height: var(--eth-category-pagination-size);
    place-items: center;
    padding: var(--eth-category-pagination-padding);
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-category-pagination-radius);
    background: var(--eth-bg-surface);
    color: var(--eth-text-title);
    text-decoration: none;
    transition: var(--eth-category-pagination-transition);
}
.navigation.pagination .page-numbers:hover {
    transform: translateY(-2px);
    box-shadow: var(--eth-premium-shadow-sm);
}
.navigation.pagination .page-numbers.current {
    background: var(--eth-primary);
    border-color: var(--eth-primary);
    color: var(--eth-light);
}

/* 分类 Hero 标题与副标题：由真实内容列宽决定换行，不强制短标题分行。 */
.eth-hero__title,
.eth-hero__subtitle {
    max-inline-size: 100%;
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-break: normal;
}

.eth-hero__title {
    margin-top: 0;
}

/* 联系区信息：与作者条/卡片语言一致 
.eth-contact__info {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--eth-premium-border);
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--eth-bg-surface) 92%, transparent);
    box-shadow: var(--eth-premium-shadow-sm);
}
*/
/* 移动端：hover 上浮降级，避免触屏粘滞 */
@media (hover: none) {
    .eth-loop-card--product-1,
    .eth-loop-card--product-2,
    .eth-loop-card--product-3,
    .eth-loop-card--product-5,
    .eth-loop-card--product-6,
    .eth-catalog-card,
    .eth-insight-card {
        transition: box-shadow 300ms ease;
    }
    .eth-loop-card--product-1:hover,
    .eth-loop-card--product-2:hover,
    .eth-loop-card--product-3:hover,
    .eth-loop-card--product-5:hover,
    .eth-loop-card--product-6:hover,
    .eth-catalog-card:hover,
    .eth-insight-card:hover {
        transform: none;
    }
}

/* =========================================================
 * 0.6.7 — Loop 细节修正
 * ----------------------------------------------------
 * - product-1：hover 不再出现背景色，标题居中
 * - Insight Grid（post-3）：hover 去掉上浮与阴影，保留标题变色 + 图片放大
 * ========================================================= */