/*
 * Dawn Art Insights Engine
 * Scoped under .da-insights only.
 */

.da-insights,
.da-insights *,
.da-insights *::before,
.da-insights *::after {
    box-sizing: border-box;
}

.da-insights {
    --da-orange: #F35B06;
    --da-navy: #253558;
    --da-surface: #F3F3F1;
    --da-soft: #E7E7E3;
    --da-muted: rgba(37, 53, 88, .72);
    --da-line: rgba(37, 53, 88, .14);
    --da-content: 1150px;
    --da-font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --da-font-en: "Work Sans", "Avenir Next", Avenir, Arial, Helvetica, sans-serif;

    width: min(var(--da-content), calc(100% - 40px));
    margin-inline: auto;
    padding: 58px 0 78px;
    color: var(--da-navy);
    font-family: Arial, Helvetica, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.da-insights a {
    color: inherit;
    text-decoration: none;
}

.da-insights img {
    max-width: 100%;
}

.da-insights__eyebrow {
    margin: 0 0 14px;
    color: var(--da-orange);
    font-family: var(--da-font-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.da-insights__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--da-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.da-insights__read {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: var(--da-navy) !important;
    font-size: 13px;
    font-weight: 800;
}

.da-insights__read:hover {
    color: var(--da-orange) !important;
}

.da-insights__featured {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    align-items: stretch;
    margin-bottom: 78px;
    border-top: 1px solid var(--da-line);
    border-bottom: 1px solid var(--da-line);
}

.da-insights__featured-media {
    min-height: 400px;
    overflow: hidden;
    background: var(--da-soft);
}

.da-insights__featured-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.da-insights__featured-media .da-insights__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    transition: transform .35s ease;
}

.da-insights__featured:hover .da-insights__featured-media .da-insights__image {
    transform: scale(1.018);
}

.da-insights__featured-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 40px 42px;
}

.da-insights__featured-copy h2 {
    margin: 13px 0 0;
    color: var(--da-navy) !important;
    font-family: var(--da-font-zh);
    font-size: clamp(27px, 2.15vw, 35px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.22;
}

.da-insights__featured-excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 18px 0 22px;
    color: var(--da-muted);
    font-size: 15px;
    line-height: 1.68;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.da-insights__section-head {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 24px;
}

.da-insights__section-head h2 {
    margin: 0;
    color: var(--da-navy) !important;
    font-family: var(--da-font-zh);
    font-size: clamp(30px, 2.7vw, 40px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.da-insights__section-head > p {
    margin: 0;
    color: var(--da-muted);
    font-size: 14px;
    line-height: 1.65;
}

.da-insights__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--da-line);
}

.da-insights__filters a {
    position: relative;
    padding: 11px 0 13px;
    color: var(--da-muted);
    font-size: 13px;
    font-weight: 700;
}

.da-insights__filters a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
}

.da-insights__filters a:hover,
.da-insights__filters a.is-active {
    color: var(--da-orange);
}

.da-insights__filters a.is-active::after {
    background: var(--da-orange);
}

.da-insights__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 28px;
}

.da-insights__card {
    min-width: 0;
}

.da-insights__card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: var(--da-soft);
}

.da-insights__card-media .da-insights__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.da-insights__card:hover .da-insights__card-media .da-insights__image {
    transform: scale(1.025);
}

.da-insights__card-copy {
    padding-top: 16px;
}

.da-insights__card h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 0;
    color: var(--da-navy) !important;
    font-family: var(--da-font-zh);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.da-insights__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 17px;
    color: var(--da-muted);
    font-size: 14px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.da-insights__image-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 220px;
    background:
        linear-gradient(135deg, rgba(37,53,88,.08), rgba(243,91,6,.08)),
        var(--da-soft);
    color: var(--da-navy);
    font-family: var(--da-font-en);
    font-weight: 800;
    letter-spacing: .10em;
}

.da-insights__image-fallback small {
    margin-top: 4px;
    color: var(--da-orange);
    font-size: 11px;
    letter-spacing: .16em;
}

.da-insights__pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-top: 58px;
    padding-top: 24px;
    border-top: 1px solid var(--da-line);
}

.da-insights__pagination > div:last-child {
    text-align: right;
}

.da-insights__pagination p {
    margin: 0;
    color: var(--da-muted);
    font-size: 12px;
    font-weight: 700;
}

.da-insights__page-btn {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--da-orange);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
}

.da-insights__page-btn--secondary {
    border: 1px solid var(--da-line);
    background: transparent;
    color: var(--da-navy) !important;
}

.da-insights__empty {
    padding: 50px 0;
    border-top: 1px solid var(--da-line);
    border-bottom: 1px solid var(--da-line);
    color: var(--da-muted);
    text-align: center;
}

@media (max-width: 820px) {
    .da-insights {
        width: 80%;
        padding: 58px 0 68px;
    }

    .da-insights__featured {
        grid-template-columns: 1fr;
        margin-bottom: 62px;
    }

    .da-insights__featured-media,
    .da-insights__featured-media .da-insights__image {
        min-height: 360px;
    }

    .da-insights__featured-copy {
        padding: 30px 0 34px;
    }

    .da-insights__section-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

@media (max-width: 520px) {
    .da-insights {
        padding: 46px 0 58px;
    }

    .da-insights__featured {
        margin-bottom: 48px;
    }

    .da-insights__featured-media,
    .da-insights__featured-media .da-insights__image {
        min-height: 250px;
    }

    .da-insights__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .da-insights__filters {
        gap: 0 18px;
    }

    .da-insights__pagination {
        grid-template-columns: 1fr 1fr;
    }

    .da-insights__pagination p {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .da-insights__image {
        transition: none !important;
    }
}


/* v0.1.1 editorial refinements */
.da-insights__card h3 a,
.da-insights__featured-copy h2 a {
    transition: color .22s ease;
}

.da-insights__card:hover h3 a,
.da-insights__featured:hover h2 a {
    color: var(--da-orange);
}

@media (max-width: 820px) {
    .da-insights {
        padding-top: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .da-insights__card h3 a,
    .da-insights__featured-copy h2 a {
        transition: none;
    }
}