/*
 * SAS Pirineos · visual audit pass · 2026-09-12
 *
 * These rules sit after the existing editorial styles so the visual pass is
 * reversible as one asset. They deliberately scope every public-web change
 * and leave SAS Territorio's private application styles alone.
 */
:root {
    --sas-audit-content-max: 1200px;
    --sas-audit-gutter: max(20px, calc((100vw - var(--sas-audit-content-max)) / 2));
    --sas-audit-ink: #263b47;
    --sas-audit-muted: #5e6f79;
    --sas-audit-rule: #d5dfe4;
}

/* The landing page is full-bleed by design, but its reading width is not. */
.sas-public > section:not(.public-hero):not(.trust-band) {
    box-sizing: border-box;
    padding-left: var(--sas-audit-gutter);
    padding-right: var(--sas-audit-gutter);
}

.sas-public > section:not(.public-hero):not(.trust-band) > * {
    min-width: 0;
}

.sas-public > section.editorial-split,
.sas-public > section.public-contact,
.sas-public > section.platform-intro {
    width: 100%;
}

.sas-public #usos .service-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(20px, 3vw, 32px);
    margin-top: 32px;
}

.sas-public #usos .service-story,
.sas-public #usos .service-story:last-child {
    display: flex;
    min-width: 0;
    min-height: 270px;
    grid-column: auto;
}

.sas-public #usos .service-story > div {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* The two home examples have equal visual weight, even when one has no
 * approved photograph yet. The light card is intentional, not an empty slot. */
.sas-public #proyectos .example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.sas-public #proyectos .example-grid article {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sas-public #proyectos .example-grid .example-card-link {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.sas-public #proyectos .example-grid .example-card-link:focus-visible {
    outline: 3px solid #2f87b5;
    outline-offset: -3px;
}

.sas-public #proyectos .example-grid article > .example-card-link > div {
    box-sizing: border-box;
    flex: 0 0 clamp(230px, 22vw, 300px);
    height: auto;
}

.sas-public #proyectos .example-grid .example-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background: #edf2f4;
    color: var(--sas-audit-ink);
}

.sas-public #proyectos .example-grid article:first-child > .example-card-link {
    background: #edf2f4;
}

.sas-public #proyectos .example-grid article:first-child .example-copy {
    flex: 1 1 auto;
    min-height: 100%;
}

.sas-public #proyectos .example-grid .example-copy span {
    top: 16px;
    left: 16px;
}

.sas-public #proyectos .example-grid article:nth-child(2) > .example-card-link > div {
    isolation: isolate;
}

.sas-public #proyectos .example-grid article:nth-child(2) > .example-card-link > div::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 35, 45, .16) 0%, rgba(18, 35, 45, .58) 100%);
}

.sas-public #proyectos .example-grid article:nth-child(2) > .example-card-link > div > img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sas-public #proyectos .example-grid article:nth-child(2) > .example-card-link > div > span {
    z-index: 2;
}

.sas-public #proyectos .example-grid .example-card-link > h3,
.sas-public #proyectos .example-grid .example-card-link > p {
    margin-left: 20px;
    margin-right: 20px;
}

/* The diary's real markup is a link containing the thumbnail and its image;
 * the old article selectors could not constrain that image. */
.diary-page .diary-editorial {
    box-sizing: border-box;
    width: min(var(--sas-audit-content-max), calc(100vw - 40px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.diary-page .journal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.diary-page .journal-cards > a {
    min-width: 0;
    overflow: hidden;
}

.diary-page .journal-cards > a > .journal-illustration-thumb {
    position: relative;
    height: clamp(220px, 25vw, 300px);
    min-height: 0;
    overflow: hidden;
}

.diary-page .journal-cards > a > .journal-illustration-thumb > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.diary-page .diary-editable-content {
    max-width: var(--sas-audit-content-max);
    margin-left: auto;
    margin-right: auto;
}

.diary-page .diary-editable-content a:link,
.diary-page .diary-editable-content a:visited {
    color: #465761;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.diary-page .diary-editable-content a:hover,
.diary-page .diary-editable-content a:focus-visible {
    color: #226785;
}

.diary-page .diary-editable-content p,
.diary-page .diary-editable-content li {
    max-width: 72ch;
}

/* Keep long editorial pages calm without narrowing maps, galleries or cards. */
.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body {
    box-sizing: border-box;
    width: min(var(--sas-audit-content-max), calc(100vw - 40px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body > p,
.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body > ul,
.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body > ol,
.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body > blockquote {
    max-width: 72ch;
}

.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body p,
.editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body li {
    line-height: 1.7;
}

.guide-editorial .guide-index {
    gap: 10px;
}

.guide-editorial .guide-index a {
    line-height: 1.35;
}

/* Group labels make the footer scannable while preserving its existing links. */
.site-footer nav::before {
    content: attr(aria-label);
    display: block;
    margin-bottom: 8px;
    color: #c8d5db;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer nav a {
    line-height: 1.55;
}

/* Tables stay usable on a phone instead of forcing the whole document wide. */
.editorial-body table {
    width: 100%;
    border-collapse: collapse;
}

.editorial-body th,
.editorial-body td {
    padding: 10px 12px;
    border: 1px solid var(--sas-audit-rule);
    vertical-align: top;
    text-align: left;
}

@media (max-width: 750px) {
    .sas-public #usos .service-directory,
    .sas-public #proyectos .example-grid,
    .diary-page .journal-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .sas-public #usos .service-story,
    .sas-public #usos .service-story:last-child {
        min-height: 0;
    }

    .diary-page .diary-editorial,
    .editorial-page:not(.diary-page):not(.guide-editorial) .editorial-body {
        width: calc(100vw - 40px);
    }

    .diary-page .journal-cards > a > .journal-illustration-thumb {
        height: 250px;
    }

    .editorial-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    .sas-public > section:not(.public-hero):not(.trust-band) {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Guide choices are a small navigation system, not an inline sentence. */
.guide-editorial .guide-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.guide-editorial .guide-links a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--sas-audit-rule);
    border-radius: 5px;
    background: #f7fafb;
    color: var(--sas-audit-ink);
    line-height: 1.45;
    text-decoration: none;
}

.guide-editorial .guide-links a:hover,
.guide-editorial .guide-links a:focus-visible {
    background: #edf4f7;
    border-color: #9fb7c4;
}

.guide-editorial .guide-links strong {
    color: #325e72;
    font-size: 15px;
}

.guide-editorial .guide-links span {
    color: var(--sas-audit-muted);
    font-size: 13px;
}

.guide-editorial .guide-context-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 20px;
}

.guide-editorial .guide-context-links a {
    padding: 10px 13px;
    border: 1px solid var(--sas-audit-rule);
    border-radius: 4px;
    background: #f7fafb;
    color: #3b6579;
    text-decoration: none;
}

@media (max-width: 750px) {
    .guide-editorial .guide-links {
        grid-template-columns: minmax(0, 1fr);
    }
}