/* Shared case cards for the homepage, portfolio and redesigned case page. */
.edt-case-grid, .wrapper-results.edt-case-grid.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.edt-case-card { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; }
.edt-case-card .mask, .edt-case-card .mask img { cursor: pointer; }
.edt-case-card .mask { mask-size: 100% 100%; margin-bottom: 1.2rem; }
.edt-case-card .mask img { width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; transition: transform .25s; }
.edt-case-card:hover .mask img { transform: scale(1.035); }
.edt-case-card h3 { font-size: 1.15rem; line-height: 1.45; margin-bottom: .5rem; overflow-wrap: anywhere; }
.edt-case-card .label { font-size: .8rem; margin-bottom: 1.5rem; }
.edt-case-card-action { margin-top: auto; font-size: .85rem; display: flex; align-items: center; gap: .8rem; }
.edt-case-card-action > span { display: grid; place-items: center; width: 2rem; height: 2rem; background: url('../media/btn-hexagon.svg') center / contain no-repeat; }

.edt-case-card { color: #292925; }
.edt-case-card:hover { color: var(--secondary-color); }
.edt-case-card:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 6px; }
.edt-case-card .mask { width: 100%; }
.edt-case-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.edt-case-heading h2 { font-size: .75rem; letter-spacing: .1em; }
.edt-case-heading h3 { font-size: 2rem; line-height: 1.3; letter-spacing: -.035em; margin-top: .65rem; }
.edt-case-heading .anno { display: block; font-size: 1.2rem; letter-spacing: normal; margin-top: .65rem; }
.edt-case-heading > a { flex-shrink: 0; font-size: .85rem; color: var(--secondary-color); text-underline-offset: .3em; }
.wrapper-results.edt-case-grid.list { display: grid; grid-template-columns: 1fr; gap: 0; }
.list .edt-case-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; column-gap: 2rem; padding: 1.5rem 0; border-top: 1px solid #E2E1D9; align-items: center; }
.list .edt-case-card .mask { grid-row: 1 / 3; margin: 0; }
.list .edt-case-card h3 { grid-column: 2; align-self: end; }
.list .edt-case-card .label { grid-column: 2; align-self: start; margin-bottom: 0; }
.list .edt-case-card-action { grid-column: 3; grid-row: 1 / 3; margin: 0; }
@media (max-width: 900px) {
    .edt-case-grid, .wrapper-results.edt-case-grid.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edt-case-heading { align-items: start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 600px) {
    .edt-case-grid, .wrapper-results.edt-case-grid.grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .edt-case-card .mask { max-width: 23rem; width: 100%; align-self: center; }
    .edt-case-heading h3 { font-size: 1.7rem; }
    .edt-case-mobile-list { display: grid; grid-template-columns: 1fr; gap: 0; }
    :is(.list, .edt-case-mobile-list) .edt-case-card { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.5rem 0; border-top: 1px solid #E2E1D9; align-items: center; }
    :is(.list, .edt-case-mobile-list) .edt-case-card .mask { grid-row: 1 / 3; margin: 0; align-self: start; }
    :is(.list, .edt-case-mobile-list) .edt-case-card h3 { grid-column: 2; align-self: end; }
    :is(.list, .edt-case-mobile-list) .edt-case-card .label { grid-column: 2; align-self: start; margin-bottom: 0; }
    :is(.list, .edt-case-mobile-list) .edt-case-card-action { grid-column: 2; grid-row: 3; margin: .75rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .edt-case-card .mask img { transition: none; }
}