/**
 * Blocks CSS File
 *
 * This file contains the styles for various blocks used in the Codehills Kickstarter theme.
 * It includes styles for the homepage blocks such as the hero section.
 *
 * @since 2.0.0
 * @package WordPress
 * @subpackage Codehills Kickstarter Theme
 */

/****************** 1. Hero *******************/

/* CSS fallback for [uk-height-viewport]: UIkit only sets height for this via JS
   (its own min-height:100vh only ships for the .uk-height-viewport *class*, not this
   attribute form), so without it the hero collapses to near-zero height until
   uikit.min.js runs, causing everything below to jump into place. */
.hero-section-block[uk-height-viewport],
.hero-section-block .uk-cover-container[uk-height-viewport] {
    min-height: 100vh;
}
.hero-content-wrapper {
    font-family: var(--kickstarter-font-primary);
    font-weight: 500;
    padding: 48px 0;
}
.hero-content p {
    font-size: 21px;
}
.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.74) 100%);
}
#eighty-years {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    -webkit-mask-image: url("../../img/80-years-mask.svg");
    mask-image: url("../../img/80-years-mask.svg");
    mask-repeat: no-repeat;
    mask-border: 1px solid #fff;
    backdrop-filter: blur(10px);
}
#eighty-years-message {
    position: absolute;
    bottom: 40px;
    right: 2vw;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    z-index: 1;
    font-family: var(--kickstarter-font-primary);
    font-weight: 300;
    font-size: 36px;
}
.hero-contact.uk-grid-medium > .uk-grid-margin {
    margin-top: 10px;
}

/************** 2. Content / media grid ***************/

.content-block-left > div.uk-margin-top:first-child,
.content-block-right > div.uk-margin-top:first-child {
    margin-top: 0 !important;
}
.content-media-grid-block a {
    color: var(--kickstarter-pink);
    text-decoration: underline;
}
.content-media-grid-block .splide__pagination {
    bottom: 75px;
    left: -100%;
    padding: 0;
    position: absolute;
}
.content-media-grid-block .uk-position-left .splide__pagination,
.content-media-grid-block .content-block .splide__pagination {
    left: inherit;
    right: 0;
    transform: translateX(calc(100% + 85px));
}
.content-media-grid-block .content-block .media-block-left .splide__pagination {
    transform: translateX(calc(100% + 100px));
}
.content-media-grid-block .content-block .media-block-right .splide__pagination {
    left: 0;
    right: 0;
    transform: translateX(calc(-100% - 30px));
}
.content-media-grid-block .content-media-grid-carousel-mobile .splide__pagination {
    bottom: 50px;
    left: 0;
    padding: 0;
    position: relative;
    text-align: center;
}

/******************* 3. Posts grid ********************/

.posts-grid-search h4 {
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--kickstarter-green);
}
.page-numbers {
    display: flex;
    list-style: none;
    gap: 20px;
}

/********************** 4. Stats **********************/

.stats-block {
    min-height: 508px;
    font-family: var(--kickstarter-font-primary);
    background-attachment: fixed;
    padding: 60px 0;
}
.stats-block .stat-icon {
    height: 68px;
}
.stats-block .stat-number {
    font-size: 50px;
    font-weight: 700;
    color: var(--kickstarter-green);
}
.stats-block .stat-label {
    text-transform: uppercase;
}

/********************** 5. Form ***********************/

.form-block h2 {
    font-size: 24px;
}

/**************** 6. Progress Carousel ****************/

.progress-carousel-block {
    padding: 35px 0 20px;
    background-attachment: fixed;
}
.progress-carousel-block-cards,
.progress-carousel-block-panels {
    padding: 35px 0 20px;
}
.progress-carousel-block h1,
.progress-carousel-block h2,
.uk-light .progress-carousel-block h1,
.uk-light .progress-carousel-block h2 {
    color: var(--kickstarter-green);
}
.progress-carousel-block-cards h1,
.progress-carousel-block-cards h2,
.uk-light .progress-carousel-block-cards h1,
.uk-light .progress-carousel-block-cards h2 {
    color: #fff;
}
.slide-cards,
.slide-panels {
    background: #fff;
    padding: 70px 50px;
}
.slide-panels {
    padding: 70px 70px 40px;
    position: relative;
}
.slide-panels::before,
.slide-panels::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 68px;
    background: var(--kickstarter-dark-blue);
    z-index: 0;
}
.slide-panels::before {
    top: 0;
    right: 0;
    background: url("../../img/corner-frame-pink-top-right.svg") 0 0 no-repeat;
}
.slide-panels::after {
    bottom: 0;
    left: 0;
    background: url("../../img/corner-frame-green-bottom-left.svg") 0 0 no-repeat;
}
.splide__slide:nth-child(2n) .slide-panels::before {
    background: url("../../img/corner-frame-green-top-right.svg") 0 0 no-repeat;
}
.splide__slide:nth-child(2n) .slide-panels::after {
    background: url("../../img/corner-frame-pink-bottom-left.svg") 0 0 no-repeat;
}
.progress-carousel-content,
.slide-label {
    font-family: var(--kickstarter-font-primary);
    font-weight: 500;
    font-size: 16px;
}
.carousel-slider-progress {
    background: transparent;
    border: 1px solid #fff;
    height: 5px;
}
.carousel-progress-bar {
    background: var(--kickstarter-green);
    height: 5px;
    transition: width 400ms ease;
    width: 0;
    transform: translate(-1px, -1px);
}
.slide-label {
    padding: 8px 22px;
    border-radius: 999em;
    border: 1px solid #fff;
    line-height: 1;
    display: inline-block;
}
.splide__slide.is-active .slide-label {
    background-color: var(--kickstarter-green);
}
.slide-content {
    margin-top: 30px;
}
.slide-cards .slide-content,
.slide-panels .slide-content {
    color: var(--kickstarter-dark-blue);
    text-align: center;
    font-family: var(--kickstarter-font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
}
.splide__arrow {
    background: transparent;
    height: 32px;
    opacity: .7;
    width: 32px;
    top: -155px;
    transform: translateY(0%);
}
.splide__arrow svg {
    fill: #fff;
    height: 32px;
    width: 32px;
}
.splide__arrow--prev {
    left: inherit;
    right: 42px;
}
.splide__arrow--next {
    right: 0;
}
.progress-carousel-block .splide {
    padding-left: 15px;
    padding-right: 15px;
}

/**************** 7. Call to action *******************/

.call-to-action-block-panel {
    padding-top: 50px;
    padding-bottom: 60px;
}
.cta-content {
    font-family: var(--kickstarter-font-primary);
    font-weight: 400;
    font-size: 16px;
}
.cta-content a {
    text-decoration: underline;
}

/********************** 8. Team ***********************/

.team-member-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--kickstarter-dark-blue);
}
.featured-member .team-member-content h3 {
    font-size: 21px;
}
.team-member-content h4 {
    font-size: 12px;
    font-family: var(--kickstarter-font-primary);
    font-weight: 500;
    color: var(--kickstarter-green);
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.featured-member .team-member-content h4 {
    font-size: 16px;
    color: var(--kickstarter-green);
    margin-bottom: 30px;
    text-transform: none;
    line-height: 1.25;
    letter-spacing: 0;
}
.team-member-image-cta {
    background-color: var(--kickstarter-green);
}
.team-member-image:hover .team-member-image-cta,
.team-member-image:focus .team-member-image-cta {
    background-color: var(--kickstarter-pink);
}
.team-member-image .uk-button-link-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25%, -50%);
}
.team-member-image .uk-button-link-arrow:hover > svg {
    transform: translateX(-25%);
}

/********************** 9. Gallery **********************/

.gallery-block h3,
.uk-light .gallery-block h3 {
    color: var(--kickstarter-green);
}