/* ==== hero ==== */
:root {
    --hero-image-width: 1920px;  /* stops the arrow shape stretching on screens smaller than 1920px - see media query for screen over 1920px */
    --hero-image-height: 498px;
    --hero-image-midpoint: calc(100% - 270px);
    --hero-image-border-width: 16px;
}
.hero {
    width: var(--clamped-vw);
    height: fit-content; /* overrides height: 200px from shared.css which applies to the other pages */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--app-teal);
}
.hero__top {
    width: 100%;
    height: var(--hero-image-height);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: clip;
}
.hero__top--white-border {
    width: var(--hero-image-width);
    height: 100%;
    position: absolute;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 100% calc(var(--hero-image-midpoint) + var(--hero-image-border-width)), 50% 100%, 0 calc(var(--hero-image-midpoint) + var(--hero-image-border-width)));
}
.hero__top-image-mask {
    width: var(--hero-image-width);
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% var(--hero-image-midpoint), 50% calc(100% - var(--hero-image-border-width)), 0 var(--hero-image-midpoint));
}
.hero__top-image {
    height: 100%;
    width: var(--clamped-vw);
    background: linear-gradient(to right, transparent 30%, 60%, black), url("../images/home/top-banner-home.jpg") 50% 80%  / cover ;
}
.hero__top-text-div {
    width: var(--content-width);
    position: absolute;
    top: 95px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
@media(min-width: 1520px) {
    .hero__top-text-div {
        top: 50px;
    }
}
.hero__title {
    color: white;
    font: 400 48px Quicksand, sans-serif;
    text-align: right;
}
.hero__contact-us-button {
    margin-top: 28px;
    padding: 5px 12px;
    border: 2px solid white;
    border-radius: 999em;
    color: white;
    font: 700 24px Inter, sans-serif;
    text-decoration: none;
}
.hero__contact:hover {
    background-color: var(--app-teal);
}
.hero__bottom {
    width: var(--content-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero__caption {
    width: min(80%, 1200px);
    color: white;
    font: 600 48px Quicksand, sans-serif;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.hero__caption-span {
    font-weight: 400;
}
.hero__options {
    width: 100%;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 49% 49%;
    grid-template-rows: 49% 49%;
    gap: 10px;
}
.hero__option {
    width: 100%;
    height: 100%;
    background-size: cover;
    text-decoration: none;
}
.hover-scrim {
    width: 100%;
    height: 100%;
    padding: 4% 5% 5% 8%;
    background-color: rgba(255, 255, 255, 0.7);
}
.hero__options-title {
    color: black;
    font: 600 40px Quicksand, sans-serif;
}
.hero__options-subtitle {
    color: black;
    font: 400 24px Lato, sans-serif;
}
.hero__option-events {
    background-image: url("../images/home/events.png");
}
.hero__option-associations {
    background-image: url("../images/home/associations.png");
}
.hero__option-about {
    background-image: url("../images/home/about.png");
}
.hero__option-piano-journal {
    background-image: url("../images/home/piano-journal.png");
}
@media (hover: hover) and (pointer: fine) {
    .hero__option {
        outline: white 3px solid;
        outline-offset: -3px;
    }
    .hero__option:hover {
        outline: none;
    }
    .hover-scrim {
        opacity: 0;
    }
    .hero__option:hover > .hover-scrim {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.7);
        color: black;
    }
}

/* ==== Tomas Dratva ==== */
.dratva .container{
    margin-top: 20px;
    padding: 20px;
    display: flex;
    gap: 20px;
    color: #eee;
    background-color: #111;
}
.dratva .image {
    width: clamp(200px, 40%, 500px);
    height: 450px;
    background: url(../images/home/tomas-dratva.webp) left 60% center / cover;
}
.dratva .right {
    flex: 1;
}
.dratva__title {
    margin-top: 30px;
    text-align: center;
    font: 500 64px Quicksand, sans-serif;
}
.dratva__caption {
    margin-bottom: 40px;
    font: 500 24px Quicksand, sans-serif;
    text-align: center;
}
.dratva__body {
    font: 400 24px Lato, sans-serif;
}


/* ==== what's new ==== */

.whatsnew {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.whatsnew__top-separator {
    width: 75px;
    border: 2px solid var(--app-teal);
    margin-top: 80px;
}
.whatsnew__top-separator2 {
    margin-top: 80px;
}
.whatsnew__title {
    margin-top: 8px;
    font: 500 64px Quicksand, sans-serif;
}
.whatsnew__caption {
    width: 70%;
    font: 400 24px Lato, sans-serif;
    margin-top: 10px;
    margin-bottom: 32px;
    text-align: center;
}
.whatsnew__carousel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2%;
    overflow: hidden;
}
/* .whatsnew__carousel-left-chevron,
.whatsnew__carousel-right-chevron {
    flex: 1;
    cursor: pointer;
} */
.whatsnew__carousel svg {
    width: 100%;
    height: 100%;
}
.whatsnew__carousel-left-chevron {
    margin-right: 2%;
}
.whatsnew__carousel-right-chevron {
    margin-left: 2%;
}
.whatsnew__carousel-tile {
    position: relative;
    flex: 1;
    text-decoration: none;
}
.whatsnew__carousel-tile-image {
    background-size: cover;
    background-position: center top;
    aspect-ratio: 1;
    width: 100%;
}
.whatsnew__carousel-tile2 > .whatsnew__carousel-tile-image {
    background-image: url("../images/home/whatsnew-conference.jpg");
}
.whatsnew__carousel-tile3 > .whatsnew__carousel-tile-image {
    background-image: url("../images/home/whatsnew-turkey.png");
    background-position: 60% top;
}
.whatsnew__carousel-tile-hover-scrim {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
}
.whatsnew__carousel-tile-text {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.whatsnew__carousel-tile-title {
    color: black;
    font: 700 24px Inter, sans-serif;
}
.whatsnew__carousel-tile-subtitle {
    color: black;
    font: 400 18px Lato, sans-serif;
}
.whatsnew__carousel-tile-subtitle--link {
    color: var(--app-teal);
    font: 400 18px Lato, sans-serif;
}
.whatsnew__carousel-tile-subtitle--link:hover {
    text-decoration: underline;
}
.whatsnew__table {
    width: 100%;
    margin: 32px 0;
}
.whatsnew__table > div:nth-of-type(odd) {
    background-color: rgba(0, 96, 114, 0.1);
}
.whatsnew__table__item {
    display: flex;
    gap: 10px;
    padding: 12px max(4px, 2%);
    font: 400 16px Lato, sans-serif;
}
.whatsnew__table__header {
    flex: 1;
    display: flex;
    gap: 10px;
}
.whatsnew__table__header > div {
    flex-basis: 33%;
}
.whatsnew__table__event {
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.expandable-event-description:hover {
    cursor: pointer;
}
.expanded-event-description {
    display: block;
}
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
    .whatsnew__carousel-tile-hover-scrim,
    .whatsnew__carousel-tile-text {
        display: none;
    }
    .whatsnew__carousel-tile:hover > .whatsnew__carousel-tile-hover-scrim,
    .whatsnew__carousel-tile:hover > .whatsnew__carousel-tile-text {
        display: block;
    }
}

/* ==== follow us ==== */

.followus {
    width: var(--clamped-vw);
    padding: 40px 0;
    background-color: var(--app-teal);
    position: relative;
}
.followus__container {
    position: relative;
    width: var(--content-width);
    height: stretch;
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.followus__background_shape--mobile {
    display: none;
}
.followus__background_shape--tablet_desktop {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.2);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}
.followus__left {
    position: relative;
    flex: 1;
    height: 100%;
    padding: 35px 35px 0 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.followus__title {
    color: white;
    font: 500 min(5vw, 64px) 'Quicksand', sans-serif;
}
.followus__caption {
    color: white;
    font: 400 min(2vw, 24px) 'Lato', sans-serif;
}
.followus__view-profile-button > button {
    color: var(--app-teal);
    font: 700 18px 'Inter', sans-serif;
    background-color: white;
    border-radius: 999rem;
    margin-top: 25px;
    padding: 5px 15px;
    border: none;
    text-decoration: none;
}
.followus__view-profile-button:hover > button {
    background-color: var(--app-teal);
    color: white;
    outline: 2px white solid;
    outline-offset: -2px;
}
.followus__right {
    position: relative;
    width: 60%;
    aspect-ratio: 1.6725;
    background-image: url("../images/home/instagram-feed.png");
    background-size: contain;
}

/* ==== ultra-wide screens ==== */

@media (min-width: 1921px) {
    .hero__top {
        width: var(--content-width);
    }
    .hero__top-image-mask {
        clip-path: polygon(var(--hero-image-border-width) 0, calc(100% - var(--hero-image-border-width)) 0, calc(100% - var(--hero-image-border-width)) calc(var(--hero-image-midpoint) + (var(--hero-image-border-width) * 0.3)), 50% calc(100% - var(--hero-image-border-width)), var(--hero-image-border-width) calc(var(--hero-image-midpoint) + (var(--hero-image-border-width) * 0.3)));
    }
    .hero__top-image {
        width: 100%;
    }
}

/* ==== tablets ==== */

@media (max-width: 1024px) {
    :root {
        --hero-image-height: 427px;
    }
    .hero__top-text-div {
        top: 17px;
    }
    .hero__title {
        font-size: 24px;
    }
    .hero__contact-us-button {
        font-size: 18px;
    }
    .hero__caption {
        margin-bottom: 42px;
        font-size: 36px;
    }
    .hero__options {
        display: none;
    }
    .whatsnew__top-separator,
    .whatsnew__carousel-left-chevron,
    .whatsnew__carousel-right-chevron
    {
        display: none;
    }
    .whatsnew__title {
        font-size: 48px;
        margin-top: 32px;
    }
    .whatsnew__caption {
        font-size: 16px;
    }
    .whatsnew__carousel {
        width: 90%;
    }
    .whatsnew__carousel-tile-title {
        font-size: 18px;
    }
    .whatsnew__carousel-tile-subtitle,
    .whatsnew__carousel-tile-subtitle--link {
        font-size: 12px;
    }
    .whatsnew__table {
        width: 90%;
    }
    .followus {
        padding: 24px 0;
    }
    .followus__container {
        width: 90%;
    }
    .followus__left {
        width: 50%;
        padding: 10px 35px 0 20px;
    }
    .followus__title {
        font-size: min(5vw, 48px);
    }
    .followus__caption {
        font-size: min(2vw, 16px);
    }
    .followus__view-profile-button > button {
        font-size: 16px;
        margin-top: 18px;
    }
}

/* ==== phones ==== */

@media (max-width: 640px) {
    :root {
        --hero-image-height: 300px;
    }
    .hero__title {
        font-size: 16px;
    }
    .hero__contact-us-button {
        font-size: 12px;
    }
    .hero__bottom {
        top: 216px;
    }
    .hero__caption {
        font-size: 24px;
    }
    .dratva .container {
        display: block;
    }
    .dratva .image {
        width: 100%;
        background-position: left 60% center;
    }
    .dratva .right {
        display: contents;
    }
    .whatsnew__carousel {
        width: 70%;
        flex-direction: column;
    }
    .whatsnew__carousel-tile {
        width: 100%;
        margin-top: 24px;
    }
    .whatsnew__carousel-tile-image {
        aspect-ratio: 1 / 1.414;
    }
    .whatsnew__carousel-tile-hover-scrim {
        display: none;
    }
    .whatsnew__carousel-tile-text{
        position: static;
        transform: none;
        text-decoration: none;
    }
    .whatsnew__carousel-tile-title {
        margin-top: 8px;
        font-size: max(16px, 5vw);
        text-decoration-style: double;

    }
    .whatsnew__carousel-tile-subtitle {
        font-size: max(12px, 3.5vw);
        margin-top: 8px;
    }
    .whatsnew__carousel-tile-subtitle--link {
        font-size: max(12px, 3.5vw);
        text-decoration: underline;
    }
    .whatsnew__table__item {
        display: block;
    }
    .whatsnew__table__header {
        border-bottom: var(--app-teal) 1px solid ;
        padding-bottom: 8px;
        justify-content: space-between;
    }
    .whatsnew__table__header > div {
        flex-basis: auto;
    }
    .whatsnew__table__type {
        display: none;
    }
    .whatsnew__table__event {
        margin-top: 4px;
    }
    .followus__background_shape--mobile {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(255, 255, 255, 0.2);
        clip-path: polygon(0 77px, 100% 77px, 100% 170px, 0 75%);
    }
    .followus__background_shape--tablet_desktop {
        display: none;
    }
    .followus__container {
        flex-direction: column;
    }
    .followus__left {
        width: 100%;
        text-align: center;
        padding: 0 0 20px 0;
    }
    .followus__title {
        font-size: 36px;
        margin-bottom: 20px;
    }
    .followus__caption {
        font-size: 14px;
    }
    .followus__view-profile-button {
        display: none;
    }
    .followus__right {
        width: 100%;
    }
}