/**
 * Rosales Projects — styles matched to the live Restance/Gutenverse design system.
 * Colors ride the theme's own WP presets: the site's DB global styles set the
 * `secondary` slug to the live brand teal (#13586e), overriding stock Restance
 * orange — so this feature inherits the real palette and follows any rebrand.
 * Hover is DERIVED from the accent (the stock gv-color-accent-hover preset is
 * still the orange and would clash). Headings use the site's Antonio condensed
 * uppercase treatment; radii follow the site's 4–8px range.
 */

.rr-single, .rr-archive, .rr-projects {
    --rr-accent: var(--wp--preset--color--secondary, #13586e);
    --rr-accent-hover: color-mix(in srgb, var(--wp--preset--color--secondary, #13586e), #000 18%);
    --rr-text: var(--wp--preset--color--primary, #3a3a4a);
    --rr-muted: var(--wp--preset--color--third, #787878);
    --rr-surface: var(--wp--preset--color--seventh, #f2f2f2);
    --rr-border: var(--wp--preset--color--forth, #e9e9e9);
    --rr-dark: var(--wp--preset--color--sixth, #141416);
    --rr-heading-font: var(--font-antonio, 'Antonio', 'Arial Narrow', sans-serif);
    color: var(--rr-text);
}

/* ── shared type ── */
.rr-eyebrow {
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 15px;
    font-weight: 600;
    color: var(--rr-accent);
    margin: 0 0 8px;
}
.rr-pill {
    display: inline-block;
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
    line-height: 1;
    padding: 7px 12px;
    border: 1px solid var(--rr-border);
    border-radius: 4px;
    color: var(--rr-muted);
    background: #fff;
}
.rr-pill-loc {
    background: var(--rr-accent);
    border-color: var(--rr-accent);
    color: #fff;
}

/* ── single project ── */
.rr-single { padding: 0 20px; }
.rr-article { max-width: 1140px; margin: 0 auto; }

.rr-hero { padding: 56px 0 8px; max-width: 800px; margin: 0 auto; }
.rr-crumbs {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 14px; color: var(--rr-muted); margin-bottom: 22px;
}
.rr-crumbs a { color: var(--rr-muted); text-decoration: none; }
.rr-crumbs a:hover { color: var(--rr-accent); }
.rr-crumbs [aria-current] { color: var(--rr-text); }

.rr-title {
    font-family: var(--rr-heading-font);
    font-size: clamp(34px, 3.61vw, 52px);
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 18px;
    color: var(--rr-text);
}
.rr-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.rr-date { font-size: 14px; color: var(--rr-muted); }

/* product / manufacturer badge */
.rr-product {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: 8px;
}
.rr-product-logo { max-height: 44px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.rr-product-text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--rr-text); }
.rr-product-label {
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    color: var(--rr-muted);
}

.rr-content { max-width: 800px; margin: 0 auto; padding: 18px 0 8px; font-size: 1.125rem; line-height: 1.75; }
.rr-content p { margin: 0 0 1.2em; }
.rr-content h2, .rr-content h3 {
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 1.6em 0 .6em;
}
.rr-content .wp-block-image img { border-radius: 8px; }
.rr-content figcaption { color: var(--rr-muted); font-size: 14px; }

/* ── project gallery: feature-first grid + native lightbox ──
 * Overrides core's flex gallery (the .wp-container-* layout rule is a single
 * class, so these two-class selectors win without !important). First photo is
 * the 2×2 feature shot; dense flow backfills gaps; captions overlay on a scrim. */
.rr-content .wp-block-gallery.has-nested-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 210px;
    grid-auto-flow: dense;
    gap: 12px;
    margin: 2rem 0;
}
/* Core ships its gallery item widths behind an intentional specificity hack
 * (`figure.wp-block-image:not(#individual-image)` — ID weight inside :not()).
 * These selectors use the same core-sanctioned pattern to outweigh it cleanly —
 * matching the mechanism core itself uses, instead of !important. */
.rr-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#rr-specificity) {
    width: auto;
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.rr-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#rr-specificity) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform .3s ease;
}
.rr-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#rr-specificity):hover img { transform: scale(1.04); }
.rr-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#rr-specificity) figcaption {
    position: absolute;
    inset: auto 0 0 0;
    margin: 0;
    padding: 26px 12px 10px;
    color: #fff;
    font-size: 13px;
    background: linear-gradient(transparent, rgba(13, 24, 31, .78));
    border-radius: 0 0 8px 8px;
}
@media (min-width: 700px) {
    .rr-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#rr-specificity):first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}
@media (max-width: 700px) {
    .rr-content .wp-block-gallery.has-nested-images { grid-auto-rows: 160px; gap: 8px; }
}

/* ── estimate CTA ── */
.rr-cta {
    max-width: 800px;
    margin: 40px auto;
    padding: 36px 32px;
    /* Roof photo under a dark teal-tinted scrim — keeps the white text/button AA-readable. */
    background:
        linear-gradient(rgba(13, 24, 31, .8), rgba(13, 24, 31, .8)),
        url('https://rosalesroofingllc.com/wp-content/uploads/2025/06/DSC01459-scaled.webp') center / cover no-repeat;
    border-radius: 8px;
    text-align: center;
}
.rr-cta .rr-eyebrow { margin-bottom: 6px; color: #a8cddd; /* light brand-teal — the base teal reads too dim over the photo scrim */ }
.rr-cta-title {
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(24px, 2.2vw, 34px);
    margin: 0 0 10px;
}
.rr-cta-text { color: rgba(255, 255, 255, .7); margin: 0 auto 22px; max-width: 480px; }
.rr-btn {
    display: inline-block;
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--rr-accent);
    color: #fff;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 4px;
    transition: background .2s ease;
}
.rr-btn:hover { background: var(--rr-accent-hover); color: #fff; }

/* ── related ── */
.rr-related { margin: 48px auto 72px; }
.rr-related-title {
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    font-size: clamp(24px, 2.639vw, 38px);
    margin: 0 0 24px;
}

/* ── archive hero ── */
.rr-archive { padding: 0 20px; }
.rr-archive-hero { max-width: 1140px; margin: 0 auto; padding: 64px 0 12px; }
.rr-archive-title {
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    font-size: clamp(40px, 6.25vw, 74px);
    line-height: 1.05;
    margin: 0 0 14px;
}
.rr-archive-intro { color: var(--rr-muted); max-width: 560px; font-size: 1.125rem; margin: 0 0 12px; }

/* ── grid + cards ── */
.rr-projects { max-width: 1140px; margin: 0 auto; padding: 24px 0 72px; }
.rr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.rr-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rr-border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.rr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 20, 22, .1); }
.rr-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--rr-surface); }
.rr-card-media .rr-card-img, .rr-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-card-media .rr-pill-loc { position: absolute; left: 12px; bottom: 12px; }
.rr-card-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--rr-surface), var(--rr-border)); }
.rr-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; flex: 1; }
.rr-card-body .rr-eyebrow { font-size: 13px; margin: 0; }
.rr-card-title { font-family: var(--rr-heading-font); text-transform: uppercase; font-size: 22px; line-height: 1.15; margin: 0; }
.rr-card-title a { color: var(--rr-text); text-decoration: none; }
.rr-card-title a:hover { color: var(--rr-accent); }
.rr-card-excerpt { color: var(--rr-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.rr-card-link {
    margin-top: auto;
    font-family: var(--rr-heading-font);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 14px;
    color: var(--rr-accent);
    text-decoration: none;
}
.rr-card-link:hover { color: var(--rr-accent-hover); }

/* ── pagination + empty ── */
.rr-pagination ul { display: flex; gap: 8px; list-style: none; padding: 32px 0 0; margin: 0; justify-content: center; }
.rr-pagination a, .rr-pagination .current {
    display: inline-block; padding: 10px 16px; border: 1px solid var(--rr-border);
    border-radius: 4px; text-decoration: none; color: var(--rr-text);
    font-family: var(--rr-heading-font);
}
.rr-pagination .current { background: var(--rr-accent); border-color: var(--rr-accent); color: #fff; }
.rr-pagination a:hover { border-color: var(--rr-accent); color: var(--rr-accent); }
.rr-empty { color: var(--rr-muted); text-align: center; padding: 48px 0; }

@media (max-width: 700px) {
    .rr-hero { padding-top: 36px; }
    .rr-grid { gap: 18px; }
    .rr-cta { padding: 28px 20px; }
}