/* ============================================================
   /home2/ -- the new home page (public_html/js/react/home2).
   Mobile first: one column, then 2 large cards side by side and
   4 small ones in a row from 768px. Fonts are the site's own
   (Almoni Medium body, Almoni Bold headings).
   ============================================================ */

.h2-page {
    --h2-band: #1f565a; /* overridden by the dashboard colour, see app.jsx */
    --h2-ink: #243d44;
    --h2-ink-soft: #5b6f74;
    --h2-sea: #cdeaea;
    --h2-sea-deep: #9fd3d6;
    --h2-card-bg: #ffffff;
    --h2-radius: 16px;
    --h2-gutter: 16px;
    /* content width as urbnsurf.com's .container: the full width (less the
       gutter) up to 1400px, then 1400px, then 1600px from 1601px -- the
       site's own .container_big is 1600px too */
    --h2-max: 100%;

    display: block;
    color: var(--h2-ink);
    background: #ffffff;
}

/* ---------- hero ---------- */

.h2-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 460px;
    height: 72vh;
    height: 72svh;
    max-height: 720px;
    overflow: hidden;
    background: var(--h2-ink);
    color: #ffffff;
}

.h2-hero--bare {
    background: linear-gradient(180deg, #3b6770 0%, var(--h2-ink) 100%);
}

.h2-hero__media,
.h2-hero__img,
.h2-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.h2-hero__media {
    z-index: 0;
}

.h2-hero__img,
.h2-hero__video {
    object-fit: cover;
}

/* The bottom of the video melts into the band colour, as on urbnsurf.com
   (their .video-wrapper:after: band colour solid at 14%, clear by ~80%,
   over the lower half). color-mix gives the transparent end the same hue,
   so the fade never goes grey. A light top shade keeps the header crisp. */
.h2-hero::before,
.h2-hero::after {
    content: "";
    position: absolute;
    z-index: 1; /* over the media, under the text */
    left: 0;
    right: 0;
    pointer-events: none;
}

.h2-hero::before {
    top: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}

.h2-hero::after {
    bottom: 0;
    height: 55%;
    background: linear-gradient(0deg, var(--h2-band) 14%, transparent 80%);
    background: linear-gradient(0deg, var(--h2-band) 14%, color-mix(in srgb, var(--h2-band) 0%, transparent) 80%);
}

/* the white title reads on the fade; a soft shadow covers bright frames */
.h2-hero__title,
.h2-hero__subtitle {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

.h2-hero__text {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--h2-max);
    padding: 0 var(--h2-gutter) 88px; /* room for the overlapping cards */
    text-align: center;
}

.h2-hero__title {
    margin: 0;
    font-family: 'Almoni Bold';
    font-size: 36px;
    line-height: 1.05;
    color: #ffffff;
    text-wrap: balance;
}

.h2-hero__subtitle {
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 1.35;
    color: #ffffff;
    opacity: 0.92;
    text-wrap: balance;
}

/* ---------- the band behind the cards ----------
   Colour comes from the dashboard (inline style). flow-root keeps the
   cards' negative top margin inside the band, so the band starts at the
   hero's bottom edge while the large cards rise over it. */

.h2-blade {
    display: flow-root;
    background-color: var(--h2-band);
    padding-bottom: 48px;
}

/* the video's dark fade ends where the band begins */
.h2-hero + .h2-blade {
    margin-top: -1px;
}

/* ---------- card rows ---------- */

.h2-cards {
    position: relative;
    z-index: 2;
    max-width: var(--h2-max);
    margin: 24px auto 0;
    padding: 0 var(--h2-gutter);
}

.h2-cards--overlap {
    margin-top: -56px;
}

.h2-row {
    display: grid;
    gap: 12px;
}

.h2-row + .h2-row {
    margin-top: 28px;
}

.h2-row--main {
    grid-template-columns: 1fr;
}

.h2-row--sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- card ---------- */

.h2-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: var(--h2-ink);
    text-decoration: none;
    background: var(--h2-card-bg);
    border-radius: var(--h2-radius);
    transition: transform .2s ease, box-shadow .2s ease;
}

a.h2-card:hover,
a.h2-card:focus {
    color: var(--h2-ink);
    text-decoration: none;
}

a.h2-card:focus-visible {
    outline: 3px solid var(--h2-sea-deep);
    outline-offset: 2px;
}

.h2-card--main {
    box-shadow: 0 8px 28px rgba(36, 61, 68, 0.14);
}

.h2-card--sub {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.h2-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
}

.h2-card--sub .h2-card__body {
    gap: 6px;
    padding: 14px;
}

/* icon: the slot keeps its size when empty, so titles line up in a row */
.h2-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.h2-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.h2-card--sub .h2-card__icon {
    width: 28px;
    height: 28px;
}

/* large cards stack on mobile -- an empty slot would only add a gap there */
.h2-row--main .h2-card__icon--empty {
    display: none;
}

.h2-card__title {
    margin: 0;
    font-family: 'Almoni Bold';
    font-size: 30px;
    line-height: 1.05;
    color: var(--h2-ink);
}

.h2-card--sub .h2-card__title {
    font-size: 20px;
}

.h2-card__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    color: var(--h2-ink-soft);
}

.h2-card--sub .h2-card__text {
    font-size: 15px;
}

/* the button sits at the bottom, whatever is above it */
.h2-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 20px;
    font-family: 'Almoni Medium'; /* the site's button weight, as the header CTA */
    font-size: 17px;
    line-height: 1;
    color: #ffffff;
    background: var(--h2-ink);
    border-radius: 999px;
}

/* a little more air between the content and the button than the row gap */
.h2-card__body > :not(.h2-card__btn):nth-last-child(2) {
    margin-bottom: 8px;
}

.h2-card--sub .h2-card__btn {
    padding: 0;
    font-size: 16px;
    color: var(--h2-ink);
    background: none;
    border-radius: 0;
}

.h2-card__btn--icon {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
}

.h2-card--sub .h2-card__btn--icon {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(36, 61, 68, 0.25);
    border-radius: 50%;
}

/* arrow: points forward -- left in Hebrew, right in English */
.h2-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

.h2-page[dir="ltr"] .h2-arrow {
    transform: rotate(135deg);
}

a.h2-card:hover .h2-arrow {
    transform: translateX(-3px) rotate(-45deg);
}

.h2-page[dir="ltr"] a.h2-card:hover .h2-arrow {
    transform: translateX(3px) rotate(135deg);
}

/* small card media: image, or a wave placeholder of the same size */
.h2-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--h2-sea);
}

.h2-card__media img,
.h2-card__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

a.h2-card:hover .h2-card__media img,
a.h2-card:hover .h2-card__media video {
    transform: scale(1.04);
}

/* a clip without a poster starts on the brand tint, not black */
.h2-card__media video {
    background: var(--h2-sea);
}

.h2-card__media--empty {
    background: linear-gradient(180deg, #e6f5f5 0%, var(--h2-sea) 100%);
}

.h2-card__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--h2-sea-deep);
    opacity: 0.7;
}

.h2-card__placeholder-back {
    fill: #7fc2c7;
    opacity: 0.6;
}

/* ---------- restaurants (white section) ---------- */

.h2-food {
    padding: 40px 0 48px;
    background: #ffffff;
}

.h2-food .h2-cards {
    margin-top: 0;
}

.h2-section-title {
    margin: 0 0 20px;
    font-family: 'Almoni Bold';
    font-size: 30px;
    line-height: 1.1;
    color: var(--h2-ink);
}

.h2-row--food,
.h2-row--info {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* the white-area sections, in dashboard order, spaced evenly. A flex gap
   (not margins) so the gift block, hidden on desktop, leaves no gap
   wherever it is placed. */
.h2-food .h2-cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.h2-card--image.h2-card--info .h2-card__title {
    font-size: 26px;
}

/* Restaurant + info cards (.h2-card--image).
   As urbnsurf.com's .image-card (#home-cards-new): white card, 24px
   radius, a two-layer lifted shadow, the photo rounded on all four corners
   and an outline pill button that fills on hover. */
.h2-card--image {
    border-radius: 24px;
    box-shadow: 0 12px 16px -4px rgba(61, 62, 64, 0.4), 0 4px 6px -2px rgba(61, 62, 64, 0.1);
}

a.h2-card--image:hover {
    box-shadow: 0 18px 24px -6px rgba(61, 62, 64, 0.42), 0 6px 10px -4px rgba(61, 62, 64, 0.12);
}

.h2-card--image .h2-card__media {
    aspect-ratio: 2 / 1;
    border-radius: 24px;
}

.h2-card--image .h2-card__body {
    gap: 8px;
    padding: 20px 24px 24px;
}

.h2-card--image .h2-card__text {
    font-size: 16px;
}

.h2-card--image .h2-card__btn {
    gap: 8px;
    padding: 8px 22px 9px;
    font-size: 16px;
    line-height: 20px;
    color: var(--h2-ink);
    background: transparent;
    border: 1px solid var(--h2-ink);
    border-radius: 18px;
    transition: background-color .3s ease, color .3s ease;
}

a.h2-card--image:hover .h2-card__btn {
    color: #ffffff;
    background: var(--h2-ink);
}

.h2-card--image .h2-card__btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.h2-card--image .h2-card__title {
    font-size: 28px;
}

.h2-card--image .h2-card__icon {
    width: 36px;
    height: 36px;
}

/* ---------- gift card (mobile only, above the restaurants) ----------
   A large card, as ללמוד לגלוש; the illustration sits in the top corner
   so the title keeps the full width. */

.h2-gift {
    position: relative;
}

/* room for the illustration, only when there is one */
.h2-gift--icon .h2-card__body {
    padding-inline-end: 96px;
}

.h2-gift__icon {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 72px;
    height: 72px;
}

.h2-gift__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.h2-gift .h2-card__btn {
    margin-top: 8px;
}

/* ---------- tablet / desktop ---------- */

@media (min-width: 768px) {
    /* the gift card is a mobile block, as on the current home page */
    .h2-gift,
    .h2-block--gift {
        display: none;
    }

    .h2-page {
        --h2-gutter: 40px;
    }

    .h2-blade {
        padding-bottom: 80px;
    }

    .h2-hero {
        min-height: 560px;
        height: 82vh;
        max-height: 860px;
    }

    .h2-hero__text {
        padding-bottom: 150px;
    }

    .h2-hero__title {
        font-size: 64px;
    }

    .h2-hero__subtitle {
        margin-top: 14px;
        font-size: 24px;
    }

    .h2-cards--overlap {
        margin-top: -110px;
    }

    .h2-row {
        gap: 20px;
    }

    .h2-row + .h2-row {
        margin-top: 40px;
    }

    .h2-row--main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* a lone large card, or the last of an odd count, spans the row */
    .h2-row--main > .h2-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .h2-row--main .h2-card__icon--empty {
        display: flex;
    }

    .h2-row--sub {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .h2-row--sub.h2-row--n3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .h2-row--sub.h2-row--n1,
    .h2-row--sub.h2-row--n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h2-card__body {
        gap: 10px;
        padding: 32px;
    }

    .h2-food {
        padding: 72px 0 88px;
    }

    .h2-section-title {
        margin-bottom: 28px;
        font-size: 44px;
    }

    .h2-row--food {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    .h2-row--food.h2-row--n1 {
        grid-template-columns: 1fr;
    }

    .h2-row--info {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
    }

    .h2-row--info.h2-row--n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h2-row--info.h2-row--n1 {
        grid-template-columns: 1fr;
    }

    .h2-food .h2-cards {
        gap: 56px;
    }

    .h2-card--image.h2-card--info .h2-card__title {
        font-size: 28px;
    }

    .h2-card--image .h2-card__body {
        padding: 24px 24px 28px;
    }

    .h2-card--image .h2-card__title {
        font-size: 32px;
    }

    .h2-card--sub .h2-card__body {
        padding: 18px 20px 20px;
    }

    .h2-card__icon {
        width: 52px;
        height: 52px;
    }

    .h2-card--sub .h2-card__icon {
        width: 32px;
        height: 32px;
    }

    .h2-card__title {
        font-size: 44px;
    }

    .h2-card--sub .h2-card__title {
        font-size: 24px;
    }

    .h2-card__text {
        font-size: 19px;
    }

    a.h2-card:hover {
        transform: translateY(-3px);
    }

    a.h2-card--main:hover {
        box-shadow: 0 14px 36px rgba(36, 61, 68, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .h2-card,
    .h2-card__media img,
    .h2-arrow {
        transition: none;
    }
}

@media (min-width: 1401px) {
    .h2-page {
        --h2-max: 1400px;
    }
}

@media (min-width: 1601px) {
    .h2-page {
        --h2-max: 1600px;
    }
}

/* ---------- overlay card style (per section, dashboard "סדר האזורים") ----------
   As urbnsurf.com's "Locations" cards (.image-over-card): the photo fills
   the card and the title, text and button sit on an 80% white panel over
   its bottom -- inset 15px on phones, 30px on desktop, 24px radius. The
   card is only as tall as the photo, so it takes far less room than the
   stacked card. On phones the photo is cropped square; a card's optional
   mobile image replaces it there (Urban Surf uploads a taller photo too). */

.h2-card--overlay {
    position: relative;
}

.h2-card--image.h2-card--overlay .h2-card__media {
    aspect-ratio: 1 / 1;
    border-radius: 24px;
}

.h2-card--image.h2-card--overlay .h2-card__body {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    gap: 6px;
    padding: 14px 20px 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 24px;
}

.h2-card--image.h2-card--overlay .h2-card__text {
    color: var(--h2-ink);
}

@media (min-width: 768px) {
    .h2-card--image.h2-card--overlay .h2-card__media {
        aspect-ratio: 2 / 1;
    }

    .h2-card--image.h2-card--overlay .h2-card__body {
        right: 30px;
        bottom: 30px;
        left: 30px;
        padding: 16px 25px 18px;
    }

    /* two to a row, so a 2:1 crop would be half as tall again as the info
       cards beside them: 3:1 keeps them the same height */
    .h2-row--food .h2-card--image.h2-card--overlay .h2-card__media {
        aspect-ratio: 3 / 1;
    }

    /* three to a row: a taller crop and a smaller inset, so the panel
       leaves some of the photo showing */
    .h2-row--info.h2-row--overlay .h2-card__media {
        aspect-ratio: 4 / 3;
    }

    .h2-row--info.h2-row--overlay .h2-card__body {
        right: 20px;
        bottom: 20px;
        left: 20px;
        padding: 14px 20px 16px;
    }
}

/* ---------- mixed-language text ----------
   On the Hebrew page a text typed in English ("Surf. Eat. Repeat.") would
   be laid out right-to-left, sending its trailing punctuation to the wrong
   end. plaintext gives every title / paragraph / button label the direction
   of its own first letter; the alignment stays the page's own. */

.h2-hero__title,
.h2-hero__subtitle,
.h2-section-title,
.h2-card__title,
.h2-card__text,
.h2-card__btn > span:first-child {
    unicode-bidi: plaintext;
}

.h2-page[dir="rtl"] .h2-section-title,
.h2-page[dir="rtl"] .h2-card__title,
.h2-page[dir="rtl"] .h2-card__text {
    text-align: right;
}

.h2-page[dir="ltr"] .h2-section-title,
.h2-page[dir="ltr"] .h2-card__title,
.h2-page[dir="ltr"] .h2-card__text {
    text-align: left;
}

/* ---------- "מה עוד קורה בפארק" (What's On) ----------
   A strip that scrolls sideways with snap points: one card per page on a
   phone, three on desktop (--h2-per-page, set by whatson.jsx). Dots show
   when there is more than one page. A finger swipe scrolls it; the dots
   scroll it too. */

.h2-whatson {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--h2-per-page, 1) - 1) * 20px) / var(--h2-per-page, 1));
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.h2-whatson::-webkit-scrollbar {
    display: none;
}

.h2-card--whatson {
    scroll-snap-align: start;
}

.h2-card--whatson .h2-card__media {
    aspect-ratio: 16 / 9;
}

.h2-card--whatson .h2-card__title {
    font-size: 24px;
}

/* the bold date line under the title */
.h2-card__when {
    margin: 0;
    font-family: 'Almoni Bold';
    font-size: 16px;
    line-height: 1.3;
    color: var(--h2-ink);
}

/* ---------- carousel dots ---------- */

/* Close together and centred, as urbnsurf.com's. The !important guard
   against the site's global button rules, which spread the dots across the
   whole row (margins, widths, flex-grow). */
.h2-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
}

.h2-dot {
    display: block !important;
    flex: 0 0 9px !important;
    width: 9px !important;
    min-width: 0 !important;
    max-width: 9px !important;
    height: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(36, 61, 68, 0.25);
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.h2-dot.is-on {
    background: var(--h2-ink);
}

.h2-dot:focus-visible {
    outline: 2px solid var(--h2-ink);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .h2-whatson {
        gap: 30px;
        grid-auto-columns: calc((100% - (var(--h2-per-page, 3) - 1) * 30px) / var(--h2-per-page, 3));
    }

    .h2-card--whatson .h2-card__title {
        font-size: 28px;
    }

    .h2-card__when {
        font-size: 17px;
    }
}

/* the next event, under the card's own text (feed cards) */
.h2-card__event {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: var(--h2-ink);
}

.h2-card__event .h2-card__when {
    font-size: 15px;
    color: var(--h2-ink-soft);
}

/* ---------------------------------------------------------------------------
   The page in plain HTML (views/site/_home2_seo.php)

   React empties #home2-app and draws the page over it, so this block is only
   ever seen by something that does not run JavaScript -- a crawler, or a
   visitor whose bundle never arrived. It is hidden the moment we know the
   bundle is on its way (.h2-js, set in the head) so it cannot flash, and the
   class comes off again if the bundle turns out never to have run.

   So these rules are the no-JavaScript page: readable, in the site's colours,
   nothing more.
   --------------------------------------------------------------------------- */

.h2-js .h2-seo {
    display: none;
}

.h2-seo {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    color: var(--h2-ink);
}

.h2-seo h1 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.1;
}

.h2-seo h2 {
    margin: 32px 0 12px;
    font-size: 26px;
    line-height: 1.15;
}

.h2-seo h3 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.2;
}

.h2-seo p {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.4;
    color: var(--h2-ink-soft);
}

.h2-seo ul {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.h2-seo li > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.h2-seo img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 14px;
}

.h2-seo li > a > span {
    display: inline-block;
    margin-top: 6px;
    font-weight: 500;
    text-decoration: underline;
}