/* ===================================================
   LANDING PAGE
   =================================================== */

.node--type-landing-page .layout {
    gap: 20px;
}

.node--type-landing-page .layout__region {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.node--type-landing-page .block {
    background: #fdfaf4;
    border: 1px solid #c9b27a;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.node--type-landing-page .field--name-field-landing-body {
    margin: 0;
}

.node--type-landing-page .field--name-field-landing-body .field__label {
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    color: #1d3446;
    margin-bottom: 20px;
}

.node--type-landing-page .field--name-field-landing-body .field__item {
    font-size: 1.05rem;
    line-height: 1.8;
}

.layout--twocol-section--33-67 {
    display: grid;
    grid-template-columns: 1fr 4fr;  /* same 33/67 ratio, gap-safe */
    gap: 20px;
    align-items: start;
}

.layout--twocol-section--33-67 .layout__region--first,
.layout--twocol-section--33-67 .layout__region--second {
    min-width: 0; /* prevents content from forcing the column wider than its grid track */
}

/* Stack on smaller screens */
@media (max-width: 768px) {
    .layout--twocol-section--33-67 {
        grid-template-columns: 1fr;
    }
}

.layout--twocol-section--33-67 .layout__region--first .views-element-container {
    align-self: stretch;
}

.node--type-landing-page {
    position: relative;
}

.node--type-landing-page::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 420px;
    background-image: url('/themes/custom/locallia/images/hero/heroimage.png');
    background-size: cover;
    background-position: center top;
    opacity: 0.17;
    mix-blend-mode: multiply;
    filter: grayscale(100%) sepia(80%) saturate(120%) brightness(140%);
    mask-image: 
        linear-gradient(to top, black 0%, black 60%, transparent 100%),
        linear-gradient(to bottom, black 0%, black 20%, transparent 100%);
    mask-composite: source-in;
    -webkit-mask-image: 
        linear-gradient(to top, black 0%, black 60%, transparent 100%),
        linear-gradient(to bottom, black 0%, black 20%, transparent 100%);
    -webkit-mask-composite: destination-in;
    z-index: 0;
    pointer-events: none;
}

.node--type-landing-page .layout {
    position: relative;
    z-index: 1;
}