/* Area cards: always-visible title and preview over a permanent lower gradient. */
.merade-area-card { min-width: 0; margin: 0; }
.merade-area-card .merade-area-card-link {
 position: relative; isolation: isolate; display: flex; align-items: flex-end;
 width: 100%; min-width: 0; aspect-ratio: 1.25; min-height: 320px; padding: 24px; box-sizing: border-box;
 overflow: hidden; border-radius: 20px; background: var(--merade-navy);
 color: var(--merade-ivory); text-decoration: none;
}
.merade-area-card .merade-area-card-image {
 position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
 transition: transform 700ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.merade-area-card-link::before {
 content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
 background: linear-gradient(180deg, transparent 25%, rgb(16 27 44 / 12%) 40%, rgb(16 27 44 / 78%) 62%, rgb(16 27 44 / 96%) 100%);
}
.merade-area-card-copy { position: relative; z-index: 2; min-width: 0; width: 100%; padding-inline-end: 54px; box-sizing: border-box; }
.merade-area-card .merade-area-card-link .merade-area-card-title {
 margin: 0 0 10px; padding: 0; color: var(--merade-white);
 font: 500 clamp(26px, 2.2vw, 32px)/1.1 var(--merade-font-heading);
 font-optical-sizing: auto; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.merade-area-card .merade-area-card-description {
 margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
 overflow: hidden; color: #e1e4e7; font: 400 16px/1.5 var(--merade-font-body);
}
.merade-area-card-arrow {
 position: absolute; z-index: 2; inset-inline-end: 24px; bottom: 24px;
 display: inline-flex; align-items: center; justify-content: center;
 width: 44px; height: 44px; border: 1px solid rgb(245 243 238 / 30%); border-radius: 50%;
 background: transparent; color: var(--merade-white); font: 400 25px/1 var(--merade-font-body);
 transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.merade-area-card-arrow svg { display: block; flex-shrink: 0; }
.merade-area-card-link:focus-visible { outline: 2px solid var(--merade-gold); outline-offset: 4px; }
@media (max-width: 600px) {
 .merade-area-card .merade-area-card-link { aspect-ratio: 1.15; min-height: 300px; padding: 20px; border-radius: 16px; }
 .merade-area-card-copy { padding-inline-end: 54px; }
 .merade-area-card .merade-area-card-link .merade-area-card-title { font-size: 30px; margin-bottom: 8px; }
 .merade-area-card .merade-area-card-description { font-size: 15px; }
 .merade-area-card-arrow { inset-inline-end: 20px; bottom: 20px; }
}

@media (hover: hover) and (pointer: fine) {
 .merade-area-card-link:hover .merade-area-card-image { transform: scale(1.035); }
 .merade-area-card-link:hover .merade-area-card-arrow { background: var(--merade-ivory); color: var(--merade-navy); border-color: var(--merade-ivory); }
}
@media (prefers-reduced-motion: reduce) {
 .merade-area-card .merade-area-card-image { transition: none; }
 .merade-area-card-link:hover .merade-area-card-image { transform: none; }
}