/*
 * Artikkelisivupohjien tyylit (arkisto + yksittäinen artikkeli).
 * Ladataan sekä etusivulle että lohkoeditoriin (functions.php).
 */

/* ════════════════════════════════════════════
   Artikkelit — arkisto (Ajankohtaista) + yksittäinen artikkeli
   Kaikki värit, pyöristykset, fonttikoot ja välistykset teeman muuttujista.
   Lohkot: kortteli-ai/article-archive, category-filter, article-breadcrumbs,
   article-byline, article-share, article-author-box, article-related, booking-cta
   ════════════════════════════════════════════ */

/* WP:n globaali lohkoväli (theme.json blockGap) lisää .wp-site-blocks-lapsille
   margin-block-startin, mikä jättäisi valkoisen raon headerin ja mainin väliin. */
main.article-archive-content,
main.single-article-content {
    margin-block-start: 0;
}

/* ── Arkiston hero — kuvaton, täysleveä tumma palkki sivun yläreunassa.
   Taustaväri tulee lohkon asetuksista (Sivupohja > Ryhmä > Väri). ── */
.article-hero {
    text-align: center;
    border-radius: 0;
    margin: 0;
}

.article-hero .wp-block-query-title,
.article-hero .wp-block-term-description {
    color: #fff;
}

/* Viimeisen elementin alamarginaali pois — välistys tulee heron paddingista */
.article-hero > *:last-child,
.article-hero .hero-desc {
    margin-bottom: 0 !important;
}

/* ── Kategoriasuodattimet ── */
.article-filter-bar {
    border-bottom: 1px solid var(--wp--preset--color--border, #e5e5e5);
    padding-top: var(--wp--custom--layout-padding--sm);
    padding-bottom: var(--wp--custom--layout-padding--sm);
}

.article-filter__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-filter__pill {
    display: inline-block;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--wp--preset--color--border, #e5e5e5);
    border-radius: var(--wp--custom--border-radius--btn);
    background-color: var(--wp--preset--color--surface, #ffffff);
    color: var(--wp--preset--color--muted, #777777);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    font-weight: var(--wp--custom--font-weight--semibold, 600);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.article-filter__pill:hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.article-filter__pill.is-active {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: #ffffff;
}

/* ── Arkiston sisältö ── */
.article-archive-wrap {
    padding-top: var(--wp--custom--layout-padding--md);
    padding-bottom: var(--wp--custom--layout-padding--md);
}

.article-archive__empty {
    text-align: center;
    color: var(--wp--preset--color--muted, #777777);
}

/* Nostettu artikkeli */
.article-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--wp--custom--layout-padding--md);
    margin-bottom: var(--wp--custom--layout-padding--lg);
}

.article-featured__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--wp--custom--border-radius--img);
}

/* Kuvasuhde tulee kontilta ja kuva täyttää sen — näin kuvan oma
   height-attribuutti ei pääse venyttämään kortteja eri korkuisiksi. */
.article-featured__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-featured:hover .article-featured__media img {
    transform: scale(1.03);
}

.article-featured__title {
    font-size: var(--wp--preset--font-size--xlarge);
    font-weight: var(--wp--custom--font-weight--heading, 800);
    line-height: var(--wp--custom--heading-line-height--lg, 1.1);
    margin: 0 0 1rem;
}

.article-featured__title a,
.article-card__title a {
    color: inherit;
    text-decoration: none;
}

.article-featured__title a:hover,
.article-card__title a:hover {
    color: var(--wp--preset--color--primary);
}

.article-featured__excerpt {
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--body, 1.7);
    margin: 0 0 1.5rem;
}

/* Artikkeliruudukko + kortit */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--custom--layout-padding--sm);
}

.article-card {
    display: flex;
    flex-direction: column;
}

.article-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--wp--custom--border-radius--img);
    margin-bottom: 1.25rem;
}

.article-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* Placeholder (ei artikkelikuvaa) samaan kuvasuhteeseen */
.article-card__media .page-lift-image,
.article-featured__media .page-lift-image,
.article-card__media .kasite-placeholder-thumbnail,
.article-featured__media .kasite-placeholder-thumbnail {
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
}

.article-card__cat {
    display: inline-block;
}

/* Yksittäisen artikkelin kategoria on post-terms-lohkon kääre: pidetään se
   block-tason elementtinä, jotta constrained-asettelu keskittää sen sisällön
   kanssa samaan linjaan (inline-block valuisi sivun vasempaan reunaan). */
.single-article-cat {
    display: block;
}

.article-card__cat,
.single-article-cat {
    margin-bottom: 0.6rem;
    color: var(--wp--preset--color--primary);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.75);
    font-weight: var(--wp--custom--font-weight--semibold, 600);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.single-article-cat a {
    color: inherit;
    text-decoration: none;
}

.article-card__cat:hover,
.single-article-cat a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-card__title {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--heading, 1.25);
    margin: 0 0 0.625rem;
}

.article-card__excerpt {
    flex-grow: 1;
    font-size: var(--wp--preset--font-size--xsmall);
    line-height: var(--wp--custom--line-height--body, 1.7);
    margin: 0 0 0.875rem;
}

.article-archive__title,
.article-related__title {
    font-size: var(--wp--preset--font-size--large);
    font-weight: var(--wp--custom--font-weight--heading, 800);
    margin: 0 0 var(--wp--custom--layout-padding--sm);
}

/* Päiväys • lukuaika */
.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    color: var(--wp--preset--color--muted, #777777);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
}

.article-meta__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ── Sivutus (the_posts_pagination) ── */
.article-archive .pagination {
    margin-top: var(--wp--custom--layout-padding--md);
}

.article-archive .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-archive .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.65rem;
    border: 1px solid var(--wp--preset--color--border, #e5e5e5);
    border-radius: var(--wp--custom--border-radius--btn);
    background-color: var(--wp--preset--color--surface, #ffffff);
    color: var(--wp--preset--color--text-dark, #1a1a1a);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.article-archive .page-numbers:hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.article-archive .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: #ffffff;
}

.article-archive .page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* Ruudunlukijateksti (esim. sivutuksen otsikko) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Varaa aika -nosto (nauha + laatikko) ── */
.booking-cta {
    text-align: center;
}

.booking-cta--band {
    background-color: var(--wp--preset--color--neutral, #eeeeee);
    padding: var(--wp--custom--layout-padding--xl) var(--wp--custom--layout-padding--sm);
}

.booking-cta--box {
    background-color: var(--wp--preset--color--neutral, #eeeeee);
    border: 1px solid var(--wp--preset--color--border, #e5e5e5);
    border-radius: var(--wp--custom--border-radius--card);
    padding: var(--wp--custom--layout-padding--sm);
    margin: var(--wp--custom--layout-padding--sm) 0;
}

.booking-cta__inner {
    max-width: 560px;
    margin: 0 auto;
}

.booking-cta__heading {
    margin: 0 0 0.75rem;
}

.booking-cta__text {
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--body, 1.7);
    margin: 0 0 1.75rem;
}

.booking-cta__notice {
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    color: var(--wp--preset--color--muted, #777777);
    margin: 0;
}

.booking-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.booking-cta .booking-cta__button {
    background-color: var(--wp--preset--color--primary);
    border: 1px solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--border-radius--btn);
    color: #ffffff;
    font-weight: var(--wp--custom--font-weight--bold, 700);
    text-decoration: none;
}

.booking-cta .booking-cta__button:hover {
    background-color: var(--wp--preset--color--text-dark, #1a1a1a);
    border-color: var(--wp--preset--color--text-dark, #1a1a1a);
    color: #ffffff;
}

.booking-cta .booking-cta__button--outline {
    background-color: var(--wp--preset--color--surface, #ffffff);
    border-color: var(--wp--preset--color--border, #e5e5e5);
    color: var(--wp--preset--color--text-dark, #1a1a1a);
}

.booking-cta .booking-cta__button--outline:hover {
    background-color: var(--wp--preset--color--surface, #ffffff);
    border-color: var(--wp--preset--color--text-dark, #1a1a1a);
    color: var(--wp--preset--color--text-dark, #1a1a1a);
}

/* ════════════════════════════════════════════
   Yksittäinen artikkeli
   ════════════════════════════════════════════ */

/* Kiinteä header vaatii tilaa otsikkoalueen yläpuolelle */
main article .wp-block-group.single-article-head {
    padding-top: var(--wp--custom--layout-padding--xxl);
    padding-bottom: 0;
}

main article .wp-block-group.single-article-body {
    padding-top: var(--wp--custom--layout-padding--md);
    padding-bottom: 0;
}

main article .wp-block-group.single-article-foot {
    padding-top: var(--wp--custom--layout-padding--sm);
    padding-bottom: 0;
    margin-top: var(--wp--custom--layout-padding--sm);
    border-top: 1px solid var(--wp--preset--color--border, #e5e5e5);
    gap: 1.25rem;
}

/* Murupolku */
.article-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--wp--custom--layout-padding--sm);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    color: var(--wp--preset--color--muted, #777777);
}

.article-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.article-breadcrumbs a:hover {
    color: var(--wp--preset--color--primary);
}

.article-breadcrumbs .rank-math-breadcrumb p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.article-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    opacity: 0.5;
}

/* Otsikkoalue */
.single-article-title {
    font-size: clamp(var(--wp--preset--font-size--large), 5vw, var(--wp--preset--font-size--xxlarge));
    font-weight: var(--wp--custom--font-weight--heading, 800);
    line-height: var(--wp--custom--heading-line-height--xl, 1.1);
    margin: 0 0 1.25rem;
}

.single-article-lead {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--body, 1.7);
    margin: 0 0 1.75rem;
}

.article-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wp--preset--color--border, #e5e5e5);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    color: var(--wp--preset--color--muted, #777777);
}

.article-byline__initial,
.article-author-box__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    font-weight: var(--wp--custom--font-weight--semibold, 600);
}

.article-byline__initial {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--wp--preset--font-size--xsmall);
}

.article-byline__author {
    color: var(--wp--preset--color--text-dark, #1a1a1a);
    font-weight: var(--wp--custom--font-weight--semibold, 600);
}

/* Pääkuva — teeman sisältöleveydessä (--wp--style--global--content-size) */
main article .wp-block-group.single-article-media {
    padding-top: var(--wp--custom--layout-padding--md);
    padding-bottom: 0;
}

.single-article-hero-image {
    margin-top: 0;
    margin-bottom: 0;
}

.single-article-hero-image img {
    max-height: 600px;
    object-fit: cover;
    width: 100%;
    border-radius: var(--wp--custom--border-radius--md);
}

/* ── Artikkelin sisältö (the_content / blokkieditori) ── */
.article-body {
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--body, 1.75);
}

.article-body p {
    margin-bottom: 1.5rem;
}

.article-body h2 {
    font-size: var(--wp--preset--font-size--mid);
    margin: 3rem 0 1rem;
}

.article-body h3 {
    font-size: var(--wp--preset--font-size--medium);
    margin: 2.25rem 0 0.875rem;
}

.article-body ul,
.article-body ol {
    margin: 0 0 1.5rem 1.25rem;
    padding-left: 0.5rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

.article-body a:not(.wp-element-button) {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-body blockquote,
.article-body .wp-block-quote {
    margin: 2.25rem 0;
    padding: 1.75rem 2rem;
    background-color: var(--wp--preset--color--surface, #ffffff);
    border-left: 3px solid var(--wp--preset--color--primary);
    border-radius: 0 var(--wp--custom--border-radius--card) var(--wp--custom--border-radius--card) 0;
}

.article-body blockquote p {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--normal, 1.4);
    margin: 0;
}

.article-body img {
    border-radius: var(--wp--custom--border-radius--img);
}

.article-body figure {
    margin: 2rem 0;
}

.article-body figcaption {
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    color: var(--wp--preset--color--muted, #777777);
    text-align: center;
    margin-top: 0.75rem;
}

/* ── Tagit ja jakonapit ── */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-tags a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: var(--wp--custom--border-radius--btn);
    background-color: var(--wp--preset--color--neutral, #eeeeee);
    color: var(--wp--preset--color--muted, #777777);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
    text-decoration: none;
}

.article-tags a:hover {
    color: var(--wp--preset--color--primary);
}

.article-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-share__label {
    margin-right: 0.25rem;
    color: var(--wp--preset--color--muted, #777777);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
}

.article-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--wp--preset--color--border, #e5e5e5);
    border-radius: var(--wp--custom--border-radius--btn);
    background-color: var(--wp--preset--color--surface, #ffffff);
    color: var(--wp--preset--color--muted, #777777);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.article-share__btn:hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.article-share__btn svg {
    width: 1rem;
    height: 1rem;
}

.article-share__btn--facebook svg,
.article-share__btn--x svg,
.article-share__btn--linkedin svg {
    fill: currentColor;
}

.article-share__btn--copy svg {
    fill: none;
    stroke: currentColor;
}

.article-share__status {
    color: var(--wp--preset--color--primary);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.875);
}

/* ── Kirjoittajalaatikko ── */
.article-author-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: var(--wp--custom--layout-padding--md);
    padding: var(--wp--custom--layout-padding--sm);
    background-color: var(--wp--preset--color--surface, #ffffff);
    border: 1px solid var(--wp--preset--color--border, #e5e5e5);
    border-radius: var(--wp--custom--border-radius--card);
}

.article-author-box__initial {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--wp--preset--font-size--medium);
}

.article-author-box__name {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--font-weight--bold, 700);
    margin: 0 0 0.2rem;
}

.article-author-box__name a {
    color: inherit;
    text-decoration: none;
}

.article-author-box__role {
    margin: 0 0 0.6rem;
    color: var(--wp--preset--color--primary);
    font-size: calc(var(--wp--preset--font-size--xsmall) * 0.75);
    font-weight: var(--wp--custom--font-weight--semibold, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.article-author-box__bio {
    margin: 0;
    font-size: var(--wp--preset--font-size--xsmall);
    line-height: var(--wp--custom--line-height--body, 1.7);
}

/* ── Lue myös ── */
.single-article-related {
    padding-top: var(--wp--custom--layout-padding--lg);
    padding-bottom: var(--wp--custom--layout-padding--lg);
}

/* ── Responsiivisuus ── */
@media (max-width: 940px) {
    .article-featured {
        grid-template-columns: 1fr;
        gap: var(--wp--custom--layout-padding--sm);
    }

    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .article-hero {
        padding-top: var(--wp--custom--layout-padding--xxl) !important;
        padding-bottom: var(--wp--custom--layout-padding--md) !important;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-author-box {
        flex-direction: column;
    }

    main article .wp-block-group.single-article-head {
        padding-top: var(--wp--custom--layout-padding--xl);
    }
}