@charset "UTF-8";
/* ==========================================================================
   Hero carousel
   --------------------------------------------------------------------------
   Loaded after compiled.purged.min.css and style.min.css so it can override
   the legacy Bootstrap 3 carousel rules without editing those generated files.

   These declarations used to live in style attributes inside
   parts/carousel.blade.php (`aspect-ratio: 1920/640` on the image,
   `font-size: 60px` on the title, `padding-bottom: 8.5%` on the caption).
   Inline styles cannot be overridden by a media query, which is exactly why
   the hero was unusable on a phone: at 375px the 3:1 image collapsed to a
   125px band and the 60px title had nowhere to go, so the caption spilled out
   of the slide and only the yellow button stayed visible.

   Margins rather than flex `gap` throughout, to match the rest of the site's
   CSS — `gap` is unsupported in IE11, which still gets the html5shiv shim.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Slide media
   -------------------------------------------------------------------------- */

.carousel .carousel-inner > .item {
    /* The caption is absolutely positioned against the slide; without this the
       tallest caption escapes the hero and lands on the search card. */
    overflow: hidden;
}

.carousel .carousel-image {
    display: block;
    width: 100%;
    /* Fallback for browsers without aspect-ratio (IE11, Safari < 15): natural
       ratio, which is what these 1920x640 slides are anyway. */
    height: auto;
    aspect-ratio: 1920 / 640;
    -o-object-fit: cover;
    object-fit: cover;
    /* Slides are shot wide; when the box gets taller than the source ratio the
       interesting half is the middle, not the sky. */
    -o-object-position: center 55%;
    object-position: center 55%;
}

/* Bottom-up scrim. The captions are white on photographs, and a bright slide
   leaves the title around 1.5:1 against the sky — under the 4.5:1 minimum with
   nothing but a text-shadow holding it up. */
.carousel .carousel-scrim {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 70%;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Caption
   -------------------------------------------------------------------------- */

.carousel .carousel-caption {
    padding-bottom: 8.5%;
}

/* The title used to be a .slide-subtitle with an inline 60px override, so it
   shared the paragraph's styling. It now has its own class; the family, colour
   and shadow are copied from .slide-subtitle so the desktop hero is unchanged. */
.carousel .slide-title {
    margin: 0 0 10px;
    color: #fffcfc;
    font-family: "PT Serif", "PT Serif Caption", Georgia, serif;
    /* 60px is the size the inline style set, and it is right at 1920 — the
       width these 1920x640 slides were cut for. Below that the slide shrinks
       but the type did not, so a long title such as "Уникален имот в полите на
       Стара планина" ran to three 66px lines and a 463px caption inside a
       426px slide: at 1280 it overflowed the top of the hero and sat across
       the navbar. Fluid size ties the title to the box it has to fit in.
       The fixed value stays first as the IE11 fallback. */
    font-size: 60px;
    font-size: clamp(28px, 3.15vw, 60px);
    font-style: italic;
    line-height: 1.1;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.33);
}

.carousel .carousel-caption .slide-subtitle {
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Controls

   `color` moved off the two inline style attributes on the chevrons.
   -------------------------------------------------------------------------- */

.carousel .carousel-control .glyphicon-chevron-left,
.carousel .carousel-control .glyphicon-chevron-right {
    color: whitesmoke;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .carousel .carousel-image {
        aspect-ratio: 16 / 9;
        max-height: 460px;
    }

    .carousel .slide-title {
        font-size: 34px;
    }

    .carousel .carousel-caption {
        left: 10%;
        right: 10%;
        padding-bottom: 5%;
    }
}

/* --------------------------------------------------------------------------
   Phone

   A 4:3 box with a floor and a ceiling: 320px at 375px wide (where 4:3 alone
   would give 281px, too short for a two-line title plus a 44px button), and
   capped at 440px so a 767px-wide landscape phone does not get a 575px hero.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .carousel .carousel-image {
        aspect-ratio: 4 / 3;
        min-height: 320px;
        max-height: 440px;
        /* IE11 and other no-aspect-ratio browsers ignore the ratio but still
           honour height, so they get the floor rather than a 125px sliver. */
        height: 320px;
    }

    .carousel .carousel-caption {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 0;
    }

    .carousel .carousel-caption .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .carousel .slide-title {
        margin-bottom: 6px;
        font-size: 24px;
        line-height: 1.2;
    }

    .carousel .carousel-caption .slide-subtitle {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 1.35;
        /* Slide descriptions run to a paragraph on some rows; two lines is all
           there is room for above the button. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .carousel .carousel-caption .btn {
        padding: 10px 22px;
        font-size: 14px;
    }

    /* The controls are 15%-wide full-height columns, so on a phone they cover
       30% of the slide — including the caption's button, which is what
       swallowed taps meant for it. Shrink them to thumb-sized pucks and lift
       them into the photo above the caption: the caption is a bottom-anchored
       block roughly 190px tall on a 320px slide, so anything centred vertically
       still lands across the title. 25% puts them in the clear at every height
       between the 320px floor and the 440px cap. */
    .carousel .carousel-control {
        top: 25%;
        bottom: auto;
        width: 44px;
        height: 44px;
        margin-top: -22px;
        opacity: 0.85;
        filter: alpha(opacity=85);
        background-image: none;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 50%;
    }

    .carousel .carousel-control.left {
        left: 8px;
    }

    .carousel .carousel-control.right {
        right: 8px;
    }

    .carousel .carousel-control .glyphicon-chevron-left,
    .carousel .carousel-control .glyphicon-chevron-right {
        width: 22px;
        height: 22px;
        margin-top: -11px;
        font-size: 22px;
    }

    .carousel .carousel-control .glyphicon-chevron-left {
        left: 50%;
        margin-left: -11px;
    }

    .carousel .carousel-control .glyphicon-chevron-right {
        right: 50%;
        margin-right: -11px;
    }
}