/* ==========================================================================
   Media tile – kafelek wideo / podcastu, 4:3 (hero: 3:2 + 50px) – blocksy_child_render_media_tile()
   Used by the media-tile block (hero) and the media-slider block (slides).
   ========================================================================== */
/* Container - the hero height is calculated from its width (cqw) */
.media-tile-block {
    width: 100%;
    container-type: inline-size;
}

.media-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--theme-palette-color-4); /* no featured image */
}

/* The whole tile is the link – content pushed to the bottom */
.media-tile .media-tile__link {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: var(--theme-palette-color-8);
    text-decoration: none;
}

.media-tile__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Gradient over the whole tile – dark at the bottom for the text, a light shade at the top for the date */
.media-tile__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.6) 35%,
        rgba(0, 0, 0, 0.15) 65%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

/* Play button – top left corner, white circle with a black triangle */
.media-tile__play {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    transition: transform 0.2s ease;
}

.media-tile__play svg {
    width: 20px;
    height: 20px;
    margin-left: 2px; /* optical centre of the triangle */
}

.media-tile__link:hover .media-tile__play,
.media-tile__link:focus-visible .media-tile__play {
    transform: scale(1.1);
}

/* Date label – top right corner, like the "Wideo" label of the listing cards */
.media-tile__date {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 7px 10px 6px;
    background: var(--theme-palette-color-1);
    font-family: "DM Mono", monospace;
    font-size: 12px;
    line-height: 1;
    color: var(--theme-palette-color-8);
}

.media-tile__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.media-tile .media-tile__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    color: var(--theme-palette-color-8);
}

.media-tile .media-tile__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--theme-palette-color-8);
    opacity: 0.85;
}

.media-tile__link:hover .media-tile__image,
.media-tile__link:focus-visible .media-tile__image {
    transform: scale(1.05);
}

/* Inside the tile – an outer outline would be clipped by overflow: hidden */
.media-tile__link:focus-visible {
    outline: 2px solid var(--theme-palette-color-8);
    outline-offset: -6px;
}

/* Large – hero: 3:2 + 50px, thick top border */
.media-tile--large {
    aspect-ratio: auto;
    height: calc(100cqw * 2 / 3 + 50px);
    border-top: 10px solid var(--theme-palette-color-3);
}

.media-tile--large .media-tile__link {
    padding: 32px;
}

.media-tile--large .media-tile__play {
    top: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
}

.media-tile--large .media-tile__play svg {
    width: 22px;
    height: 22px;
}

.media-tile--large .media-tile__date {
    top: 24px;
    right: 24px;
    font-size: 14px;
}

.media-tile--large .media-tile__content {
    gap: 12px;
}

.media-tile--large .media-tile__title {
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.15;
}

.media-tile--large .media-tile__excerpt {
    font-size: 16px;
}

@media (max-width: 767px) {
    /* Narrow screens – square, 3:2 leaves too little room for the title and excerpt */
    .media-tile--large {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .media-tile--large .media-tile__link {
        padding: 20px;
    }

    .media-tile--large .media-tile__play {
        top: 16px;
        left: 16px;
        width: 40px;
        height: 40px;
    }

    .media-tile--large .media-tile__play svg {
        width: 20px;
        height: 20px;
    }

    .media-tile--large .media-tile__date {
        top: 16px;
        right: 16px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .media-tile__image,
    .media-tile__play {
        transition: none;
    }
}

/*
* Dark mode – for dark backgrounds (hero: .media-tile-block--dark, slider: .media-slider--dark).
* Subtle light edge + glow from the palette white, so the tiles do not melt into the background.
* (A blurred shadow alone at 10% is practically invisible on black - it fades from ~5% at the edge.)
*/
.media-tile-block--dark .media-tile,
.media-slider--dark .media-tile {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-palette-color-8) 14%, transparent),
        0 0 34px 1px color-mix(in srgb, var(--theme-palette-color-8) 22%, transparent);
}

/* Tablet / mobile - lighter: fainter edge, smaller and weaker glow */
@media (max-width: 1024px) {
    .media-tile-block--dark .media-tile,
    .media-slider--dark .media-tile {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--theme-palette-color-8) 10%, transparent),
            0 0 20px 0 color-mix(in srgb, var(--theme-palette-color-8) 12%, transparent);
    }
}

/* Hero – the black top border would disappear on a dark background */
.media-tile-block--dark .media-tile--large {
    border-top-color: var(--theme-palette-color-8);
}

/* Editor placeholder - no post picked */
.media-tile__empty {
    padding: 16px;
    border: 1px dashed var(--theme-palette-color-5);
}