/* =============================================================
   LOODON v2 — Block-specific overrides
   Keeps native WP block styles aligned with the Loodon design
   ============================================================= */

/* wp:navigation — remove default underlines */
.wp-block-navigation a:not(:hover) { text-decoration: none; }

/* Header: mobile overlay open state */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #ffffff;
    padding: 24px 20px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item a {
    color: var(--wp--preset--color--orange, #f47920);
    font-size: 20px;
    font-weight: 600;
    padding: 14px 0;
    border-bottom: 1px solid rgba(244, 121, 32, 0.15);
}

/* wp:query — post grid baseline */
.wp-block-query .wp-block-post-template {
    display: grid;
    gap: 60px 40px;
}

/* 2-column news card grid — grid-template-columns must be on the post-template,
   not the outer .news-grid div (whose only direct child is .wp-block-query) */
.news-grid .wp-block-post-template {
    grid-template-columns: 1fr 1fr;
    gap: 80px 45px; /* Figma 2026-09 */
}

@media (max-width: 767px) {
    /* this sheet loads after global.css, so the mobile stack lives here too */
    .news-grid .wp-block-post-template { grid-template-columns: 1fr; gap: 48px; }
}

/* wp:post-featured-image inside a news-card needs an explicit height
   so object-fit: cover actually clips the image */
.news-card .wp-block-post-featured-image {
    position: relative;
    height: 514px;
    border-radius: 25px; /* Figma 2026-09: rounded like every other card */
    overflow: hidden;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.news-card .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.news-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figma 2026-09: three of every four cards carry a 60% brand tint (yellow,
   none, green, blue in reading order). Decorative, so it cycles with the
   card's position; hover lifts it like the team photos. */
.news-card .wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.news-grid .wp-block-post:nth-child(4n+1) .news-card .wp-block-post-featured-image::after { background: rgba(255, 242, 0, 0.6); }
.news-grid .wp-block-post:nth-child(4n+3) .news-card .wp-block-post-featured-image::after { background: rgba(109, 192, 103, 0.6); }
.news-grid .wp-block-post:nth-child(4n+4) .news-card .wp-block-post-featured-image::after { background: rgba(92, 214, 247, 0.6); }

@media (hover: hover) {
    .news-card:hover .wp-block-post-featured-image::after { opacity: 0; }
}

/* wp:post-featured-image as the Our Work client logo — 2026-08 design
   revision: white circular disc, whole logo shown inside it uncropped
   (object-fit: contain + inset padding keeps wide logos clear of the
   circle's curve). */
.work-item .wp-block-post-featured-image.work-item__thumb {
    overflow: hidden;
    border-radius: 50%;
}
.work-item__thumb a { display: block; width: 100%; height: 100%; }
.work-item__thumb img {
    width: 100%;
    height: 100%;
    /* core/post-featured-image writes its `scale` attribute as an inline
       object-fit (cover unless told otherwise), which silently beat this rule
       and cropped every non-square logo. The templates now set
       scale:contain; !important keeps older saved markup honest too. */
    object-fit: contain !important;
    object-position: center;
    /* Figma "Loodon-revise" Our Work: logos span 82–86% of the disc, so an 8%
       inset each side. A logo with content in its corners is masked by the
       circle above ~71%, exactly as it would be in the design. */
    padding: 8%;
    box-sizing: border-box;
    border-radius: 0;
    display: block;
}

/* wp:post-title in archive/single */
.wp-block-post-title a { color: inherit; }

/* wp:image — default block image styles */
.wp-block-image img { border-radius: 0; }

/* wp:query-pagination */
.wp-block-query-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 40px var(--wp--custom--section-pad-x, 88px);
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: var(--wp--preset--font-size--body, 18px);
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    color: #000000;
    transition: color 0.25s ease;
}

.wp-block-query-pagination .page-numbers.current {
    color: var(--wp--preset--color--orange, #f47920);
    font-weight: 600;
}

.wp-block-query-pagination .page-numbers:not(.current):hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
    color: var(--wp--preset--color--orange, #f47920);
}

/* wp:button — on-brand style */
.wp-block-button__link.wp-element-button {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--body, 18px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 18px 48px;
    border-radius: 0;
    transition: opacity 0.25s ease;
}

.wp-block-button__link.wp-element-button:hover { opacity: 0.85; }