/*
 * Homepage (www/index.php), design C with "dark glass": the photo runs
 * behind the search card and the three boxes, and both are dark
 * see-through panels (backdrop blur) with white text. The search card has
 * labelled 48px white fields like the Advanced Search page and a red Search
 * button; the boxes keep a light gray Sign Up button. Below that, one dark
 * panel holds the full-width video banner (off-white play button, black
 * icon), Featured Artists, Browse by Country (the site's regions) and
 * Additional Countries (the other BandMix sites). Phones go edge to edge.
 * Browsers without backdrop-filter get a darker solid panel instead.
 *
 * The homepage markup uses its own hp-* classes, so the legacy .visual /
 * .search-box / .boxes / .featured / .states rules in styles.css no longer
 * apply to it (they are left in place for any other page that uses them).
 * This stylesheet is only loaded by the homepage.
 *
 * Ported from bandmix.com.au. Unlike there, the headline and tagline may
 * wrap (balanced) at every width: the translations run much longer than
 * the English ("MUSIKER ODER BAND GESUCHT?", the German tagline is two
 * sentences), so the .au one-line nowrap sizing would overflow.
 *
 * Hebrew pages load home-page.rtl.css instead (config.php RTL_CSS),
 * generated from this file by bin/build-rtl-css.sh - re-run it after
 * editing this file. The photo crops and the play icon are marked
 * rtl:ignore so they stay as they are.
 */

body.hp-body {
    background: #444;
}

#homepage.hp {
    --hp-red: #d93337;
    --hp-red-dark: #b0262a;
    --hp-bar: #404040;
    --hp-ink: #1f1f1f;
    --hp-text: #444;
    --hp-muted: #767676;
    --hp-line: #c9c9c9;
    --hp-btn-light: #e4e4e4;
    --hp-btn-light-hover: #d4d4d4;
    --hp-dark: #262626;
    --hp-dark-line: #3a3a3a;
    --hp-dark-muted: #b5b5b5;
    --hp-glass: rgba(20, 20, 20, 0.58);
    --hp-glass-line: rgba(255, 255, 255, 0.12);
    --hp-glass-blur: blur(16px) saturate(1.3);
    --hp-font: 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    --hp-font-head: HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, 'Helvetica Neue Bold Condensed', 'Open Sans Condensed', 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 32px;
    font-family: var(--hp-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--hp-text);
}

#homepage.hp a:focus-visible,
#homepage.hp button:focus-visible {
    outline: 2px solid var(--hp-red);
    outline-offset: 2px;
}

#homepage.hp .hp-top a:focus-visible,
#homepage.hp .hp-top button:focus-visible,
#homepage.hp .hp-lower a:focus-visible {
    outline-color: #fff;
}

/* ---------- Photo behind the search card and the three boxes ---------- */

.hp .hp-top {
    overflow: hidden;
    padding-bottom: 24px;
    border-radius: 8px;
    /*rtl:ignore*/
    background: #333 url(/images/bg-section-01.jpg) no-repeat 50% 20%;
    background-size: cover;
}

/* The frosted glass makes the search card and the boxes strip separate
   layers, and the strip comes later, so the category list that drops out
   of the card went under it. The hero sits above the strip instead. */
.hp .hp-hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 380px;
    padding: 48px 64px;
}

.hp .hp-strip-wrap {
    position: relative;
    z-index: 1;
}

/* Dark glass panels over the photo. */
.hp .hp-card,
.hp .hp-strip {
    background: var(--hp-glass);
    -webkit-backdrop-filter: var(--hp-glass-blur);
    backdrop-filter: var(--hp-glass-blur);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hp .hp-card,
    .hp .hp-strip {
        background: rgba(20, 20, 20, 0.84);
    }
}

.hp .hp-intro {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hp .hp-title {
    margin: 0 0 16px;
    font: 900 54px/52px 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-wrap: balance;          /* one line when it fits; long translations */
    overflow-wrap: break-word;   /* wrap evenly instead of overflowing */
    color: #fff;
}

.hp .hp-tagline {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    line-height: 28px;
    text-wrap: balance;
}

/* Japanese (index.php marks the headline block lang="ja"): wrap between
   phrases, not in the middle of a word. */
.hp .hp-intro:lang(ja) .hp-title,
.hp .hp-intro:lang(ja) .hp-tagline {
    word-break: auto-phrase;
}

.hp .hp-card {
    display: flex;
    flex: 0 0 400px;          /* always 400px: long translations beside it wrap */
    box-sizing: border-box;   /* instead of squeezing the card */
    flex-direction: column;
    gap: 14px;
    margin: 0 0 0 auto;
    padding: 22px 24px 14px;
    border-top: 4px solid var(--hp-red);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.hp .hp-card h2 {
    margin: 0;
    font: 700 22px/1.2 var(--hp-font-head);
    color: #fff;
}

.hp .hp-field {
    position: relative;
}

.hp .hp-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
}

/* Category: the desktop dropdown button and the phone <select> come from
   search_select_box_home(); both are restyled here as plain 48px fields. */
.hp #sCombined_box,
.hp .hp-field .mobile-dropdown,
.hp #location_input {
    display: block;
    float: none;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 40px 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;
    box-shadow: none;
    text-align: left;
    text-shadow: none;
    font: 15px/46px var(--hp-font);
    color: var(--hp-ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hp #sCombined_box {
    font-size: 15px !important;   /* styles.css forces 12-14px below 992px */
}

.hp #location_input {
    padding-right: 12px;
    background-image: none;
    line-height: normal;
}

/* styles.css greys out the typed text of every field that has a
   placeholder ([placeholder] { color: #888 !important }); typed text here
   should be dark like the other fields. */
#homepage.hp #location_input {
    color: var(--hp-ink) !important;
}

.hp #location_input::placeholder {
    color: var(--hp-muted);
}

.hp #sCombined_box:focus,
.hp .hp-field .mobile-dropdown:focus,
.hp #location_input:focus {
    outline: 0;
    border-color: #0c83eb;
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .45);   /* stronger halo on the dark glass */
}

.hp .hp-field .mobile-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: normal;
    font-size: 16px !important;   /* styles.css forces 12-14px; 16px stops iOS zooming in */
}

.hp #sCombined_box::after,
.hp #sCombined_box .caret {
    display: none;
}

.hp .hp-field .dropdown-select {
    width: 100%;
    max-height: 300px;
    margin-top: 4px;
    padding: 6px 0;
    overflow: auto;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font: 15px/1.4 var(--hp-font);
}

.hp .hp-field .dropdown-select .dropdown-item {
    padding: 8px 14px;
    white-space: normal;
    color: var(--hp-ink);
}

.hp .hp-field .dropdown-select .dropdown-item:hover,
.hp .hp-field .dropdown-select .dropdown-item:focus {
    background: #f0f0f0;
    color: var(--hp-ink);
}

.hp #search-term .ui-autocomplete {
    z-index: 20;
    width: 100%;
}

.hp .hp-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: var(--hp-red);
    font: bold 16px/1 var(--hp-font);
    letter-spacing: .5px;
    color: #fff;
    cursor: pointer;
}

.hp .hp-search-btn:hover {
    background: var(--hp-red-dark);
}

.hp .hp-adv {
    margin: 0;
    text-align: center;
}

.hp .hp-adv a {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    color: #eee;
}

.hp .hp-adv a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- The three boxes as one glass strip ---------- */

.hp .hp-strip {
    display: flex;
    margin: 0 24px;
    overflow: hidden;
    border-radius: 8px;
    color: #ddd;
}

.hp .hp-box {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 22px 24px;
}

.hp .hp-box + .hp-box {
    border-left: 1px solid var(--hp-glass-line);
}

.hp .hp-box h2 {
    margin: 0;
    font: 700 24px/1.1 var(--hp-font-head);
    text-transform: uppercase;
    color: #fff;
}

.hp .hp-box p {
    flex-grow: 1;
    margin: 0;
}

.hp .hp-more {
    font-size: 14px;
    font-weight: bold;
    line-height: 44px;
    text-decoration: none;
    color: #ff9a9c;
}

.hp .hp-more:hover {
    color: #ffc1c2;
    text-decoration: underline;
}

/* Sign Up: light gray with dark text. */
.hp .hp-btn-light {
    align-self: flex-start;
    display: inline-block;
    height: 44px;
    padding: 0 24px;
    border-radius: 6px;
    background: var(--hp-btn-light);
    font-weight: bold;
    line-height: 44px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hp-ink);
}

.hp .hp-btn-light:hover {
    background: var(--hp-btn-light-hover);
    color: var(--hp-ink);
    text-decoration: none;
}

.hp .hp-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hp .hp-arrows {
    display: flex;
    flex: none;
    gap: 6px;
}

.hp .hp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}

.hp .hp-arrow:hover {
    border-color: #fff;
    color: #fff;
}

.hp .hp-quotes {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.hp .hp-quotes .carousel-inner {
    flex-grow: 1;
    min-height: 96px;
    display: grid;   /* every quote shares one cell, so the box is always */
}                    /* as tall as the longest one and doesn't jump as they rotate */

.hp .hp-quotes .carousel-item {
    display: block;
    grid-area: 1 / 1;
    float: none;
    margin-right: 0;
    visibility: hidden;
}

.hp .hp-quotes .carousel-item.active,
.hp .hp-quotes .carousel-item-next,
.hp .hp-quotes .carousel-item-prev {
    visibility: visible;
}

.hp .hp-quotes blockquote {
    margin: 0;
    font-style: italic;
}

.hp .hp-quotes blockquote strong {
    font-style: normal;
    color: #fff;
}

.hp .hp-quotes-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hp .hp-quotes .carousel-indicators {
    position: static;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.hp .hp-quotes .carousel-indicators li {
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.hp .hp-quotes .carousel-indicators li::before,
.hp .hp-quotes .carousel-indicators li::after {
    display: none;
}

.hp .hp-quotes .carousel-indicators li.active {
    background: #fff;
}

/* ---------- One dark panel: video, Featured Artists, provinces ---------- */

.hp .hp-lower {
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;   /* clips the video to the panel's corners */
    padding: 0 32px 32px;
    border-top: 4px solid var(--hp-red);
    border-radius: 8px;
    background: var(--hp-dark);
    color: #ddd;
}

.hp .hp-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 224px;
    margin: 0 -32px;   /* full width of the dark panel, flush under its red top edge */
    overflow: hidden;
    background: #111 url(/images/img-40.jpg) no-repeat center;
    background-size: cover;
    color: #fff;
    text-decoration: none;
}

.hp .hp-video::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.25);
}

.hp .hp-video > * {
    position: relative;
}

.hp .hp-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f4f4f4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform .15s ease;
}

.hp .hp-play svg {
    /*rtl:ignore*/
    margin-left: 3px;   /* optical centre of the triangle (play points right in RTL too) */
}

.hp .hp-video:hover .hp-play {
    transform: scale(1.06);
}

.hp .hp-video-label {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hp .hp-video:hover .hp-video-label {
    color: #fff;
}

.hp .hp-sec {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hp .hp-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hp-dark-line);
}

.hp .hp-sec-head h2 {
    margin: 0;
    font: 700 26px/1.2 var(--hp-font-head);
    color: #fff;
}

.hp .hp-sec-head a {
    flex: none;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #ff8a8c;
}

.hp .hp-sec-head a:hover {
    color: #ffb3b4;
    text-decoration: underline;
}

.hp .hp-artists {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp .hp-artist a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.hp .hp-artist-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--hp-dark-line);
}

.hp .hp-artist-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp .hp-artist-name,
.hp .hp-artist-city {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    unicode-bidi: plaintext;   /* Latin names on Hebrew pages keep their punctuation in place */
    text-align: left;          /* ...but stay aligned with the card (right in RTL) */
    text-overflow: ellipsis;
    line-height: 1.3;
}

.hp .hp-artist-name {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
}

.hp .hp-artist-city {
    font-size: 13px;
    color: var(--hp-dark-muted);
}

.hp .hp-artist a:hover .hp-artist-name {
    color: #ff8a8c;
}

.hp .hp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp .hp-chips a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    background: var(--hp-dark-line);
    font-size: 14px;
    text-decoration: none;
    color: #eee;
}

.hp .hp-chips a:hover {
    background: #4a4a4a;
    color: #fff;
}

/* ---------- Narrower desktops ----------
   Below 1200px there isn't room for the one-line headline beside the
   search card, so the card moves under the headline. */

@media (min-width: 768px) and (max-width: 1199px) {
    .hp .hp-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 40px 32px;
    }

    .hp .hp-intro {
        flex: none;
    }

    .hp .hp-card {
        flex: none;
        width: 400px;
        margin: 0;
    }
}

/* ---------- Phones: edge to edge ---------- */

@media (max-width: 767px) {
    #homepage.hp {
        gap: 16px;
        padding-bottom: 24px;
    }

    /* Location text the same size as the category box (16px, which also
       stops iOS zooming in when the field is tapped). */
    .hp #location_input {
        font-size: 16px;
    }

    /* Darker, less see-through glass on phones for the three boxes... */
    .hp .hp-strip {
        background: rgba(18, 18, 18, 0.80);
    }

    /* ...and white frosted glass for the search card, with dark text. */
    .hp .hp-card {
        background: rgba(255, 255, 255, 0.58);
    }

    .hp .hp-card h2,
    .hp .hp-card .hp-label {
        color: var(--hp-ink);
    }

    .hp .hp-card #sCombined_box,
    .hp .hp-card .mobile-dropdown,
    .hp .hp-card #location_input {
        border-color: rgba(0, 0, 0, 0.14);
    }

    .hp .hp-card #sCombined_box:focus,
    .hp .hp-card .mobile-dropdown:focus,
    .hp .hp-card #location_input:focus {
        border-color: #0c83eb;
        box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
    }

    .hp .hp-adv a,
    .hp .hp-adv a:hover {
        color: var(--hp-bar);
    }

    #homepage.hp .hp-card a:focus-visible,
    #homepage.hp .hp-card button:focus-visible {
        outline-color: var(--hp-red);
    }

    /* Two copies of the photo on phones: one behind the headline and the
       search card (ending just under the card), and a separate one behind
       the three boxes, with a strip of page gray between them. */
    .hp .hp-top {
        padding-bottom: 0;
        border-radius: 0;
        background: none;
    }

    .hp .hp-hero {
        display: block;
        min-height: 0;
        padding: 28px 12px 12px;
        /*rtl:ignore*/
        background: #333 url(/images/bg-section-01.jpg) no-repeat 30% 20%;
        background-size: cover;
    }

    .hp .hp-strip-wrap {
        margin-top: 16px;
        padding: 12px;
        /*rtl:ignore*/
        background: #333 url(/images/bg-section-01.jpg) no-repeat 45% 75%;
        background-size: cover;
    }

    /* The headline and tagline use nearly the full width (6px from the
       screen edges) and scale with it. Same sizes as .au, where English
       fits on one line; the longer translations wrap onto balanced lines
       instead of running off the screen. */
    .hp .hp-intro {
        max-width: none;
        margin: 0 -6px;
        padding-bottom: 20px;
        text-align: center;
    }

    .hp .hp-title {
        margin-bottom: 10px;
        font-size: clamp(29px, calc(9.6vw - 1px), 44px);   /* ~36px on a 390px phone */
        line-height: 1.05;
        white-space: normal;
    }

    .hp .hp-tagline {
        font-size: clamp(11px, calc(3.85vw - .5px), 17px);   /* 14.5px on a 390px phone */
        line-height: 1.4;
        letter-spacing: -.1px;
        white-space: normal;
    }

    /* Headline translations much longer than the English (index.php adds
       hp-title-long over 20 characters: "MUSIKER ODER BAND GESUCHT?",
       "ANNONCES MUSICIENS ET GROUPE") take two lines instead of three. */
    .hp .hp-title-long {
        font-size: clamp(24px, calc(7.6vw - 1px), 36px);   /* ~29px on a 390px phone */
    }

    /* Japanese (index.php marks the headline block lang="ja"):
       "音楽仲間を探してるあなたへ" (13 characters) is sized to stay on one
       line, and the tagline wraps between phrases, not mid-word. */
    .hp .hp-intro:lang(ja) .hp-title {
        font-size: clamp(20px, calc(6.8vw - 1px), 32px);   /* ~25.5px on a 390px phone */
        line-height: 1.2;
    }

    .hp .hp-card {
        margin: 0;
        padding: 18px 16px 8px;
        gap: 12px;
    }

    /* No "Search Local Musicians and Bands" heading and no Category /
       Location labels on phones (kept for screen readers): the card is just
       the two fields and the Search button. */
    .hp .hp-card h2,
    .hp .hp-card .hp-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .hp .hp-adv a {
        line-height: 44px;
        font-size: 14px;
    }

    .hp .hp-strip {
        flex-direction: column;
        margin: 0;
    }

    .hp .hp-box {
        flex: none;
        gap: 8px;
        padding: 16px 16px 6px;
    }

    .hp .hp-box:first-child {
        padding-top: 20px;
    }

    .hp .hp-box + .hp-box {
        border-top: 1px solid var(--hp-glass-line);
        border-left: 0;
    }

    .hp .hp-box h2 {
        font-size: 22px;
    }

    .hp .hp-btn-light {
        align-self: stretch;
        margin: 4px 0 10px;
        text-align: center;
    }

    .hp .hp-arrow {
        width: 36px;
        height: 36px;
    }

    .hp .hp-lower {
        gap: 28px;
        padding: 0 16px 24px;
        border-radius: 0;
    }

    .hp .hp-video {
        height: 160px;
        margin: 0 -16px;
        gap: 12px;
        background-position: 40% center;
    }

    .hp .hp-play {
        width: 52px;
        height: 52px;
    }

    .hp .hp-sec {
        gap: 14px;
    }

    .hp .hp-sec-head {
        padding-bottom: 10px;
    }

    .hp .hp-sec-head h2 {
        font-size: 24px;
    }

    /* Featured artists scroll sideways on phones. */
    .hp .hp-artists {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
    }

    .hp .hp-artist {
        flex: 0 0 150px;
        min-width: 0;   /* a long name is cut with "..." instead of widening its card */
        scroll-snap-align: start;
    }

    .hp .hp-chips {
        gap: 8px;
    }

    .hp .hp-chips a {
        height: 44px;
        border-radius: 22px;
    }
}