/* DOM class inventory:
  .drkn--title-image
  .drkn--title-image__media
  .drkn--title-image__img
  .drkn--title-image__overlay
  .drkn--title-image__content
  .drkn--title-image__inner
  .drkn--title-image__title
  .drkn--title-image__subtitle
  .drkn--title-image__actions
*/

.drkn--title-image {
    display: block;
    position: relative;
}

.drkn--title-image__media {
    position: relative;
    width: 100%;
    /* aspect-ratio with device-specific fallbacks via variables */
    aspect-ratio: var(--ratio-desktop, 21/9);
    overflow: hidden;
    background: #e9ecef;
}

@media (max-width: 1023px) {
    .drkn--title-image__media {
        aspect-ratio: var(--ratio-tablet, 16/9);
    }
}

@media (max-width: 767px) {
    .drkn--title-image__media {
        aspect-ratio: var(--ratio-mobile, 3/2);
    }
}

.drkn--title-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* explicit layering */
}

.drkn--title-image__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* If template didn't set --overlay (e.g. overlay_type: none), show nothing */
    background: var(--overlay, none);
    z-index: 2; /* above image, below content */
}

.drkn--title-image__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15%;
    color: #fff;
    z-index: 3; /* above overlay */
    padding: 0 5vmin;
}

.drkn--title-image__inner {
    max-width: var(--site-content-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.drkn--title-image__title {
    margin: 0 0 .25em;
    line-height: 1.1;
    font-weight: 700;
    color: inherit; /* ensure white by default */
}

.drkn--title-image__subtitle {
    margin: 0;
    line-height: 1.35;
    font-size: clamp(16px, 1.6vw, 28px);
    opacity: .9;
    color: inherit; /* ensure white by default */
}

.drkn--title-image__actions {
    margin-top: 1rem;
}

.drkn--title-image__actions a {
    font-size: 1rem;
}

@media (min-width: 1024px) {
    .drkn--title-image__actions {
        margin-top: 1.5rem;
    }

    .drkn--title-image__actions a {
        font-size: 20px;
    }
}