/*!
Theme Name: oribsn
Author: Ori Ben-Simon
Author URI: oribsn.dev
Description: Custom theme for Katzrin Village
Version: 1.0.0
Text Domain: oribsn
*/

/* ==========================================================================
   FONTS
   ========================================================================== */
@font-face {
    font-family: 'abraham';
    src: url('assets/fonts/AbrahamRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'abraham';
    src: url('assets/fonts/AbrahamBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'gipsy';
    src: url('assets/fonts/fbgipsy-boldwebfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   RESET & VARIABLES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; outline: none; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, picture, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; background: transparent; border: 0; padding: 0; color: inherit; }
button { cursor: pointer; }

:root {
    /* Colors */
    --c-white: #FFFFFF;
    --c-black: #000000;
    --c-blue-dark: #19385E;
    --c-blue-light: #ABCBED;
    --c-green-dark: #203F33;
    --c-green-light: #5FD59A;
    --c-lava-dark: #383432;
    --c-lava-light: #CAC2AF;
    --c-orange: #EA5818;
    --c-purple-dark: #422B82;
    --c-purple-light: #C2A4FF;
    --c-yellow: #FEC516;
    --c-stone: #675F5B;
    --c-cream: #E8E5DE;
    
    /* Typography */
    --ff-body: 'abraham', sans-serif;
    --ff-headings: 'gipsy', sans-serif;

    /* Layout (1440px logic) */
    --max-w: 1440px;
    --gutter: 1.388vw;      /* 20px @ 1440px */
    --gutter-wide: 3.888vw; /* 56px @ 1440px */
    --header-h: 5vw;        /* ~72px @ 1440px */

    /* Z-index */
    --z-header: 100;
    --z-dropdown: 110;
    --z-overlay: 200;

    /* Transitions */
    --t-fast: 0.2s ease-in-out;
    --t-base: 0.3s ease-in-out;
}

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY LOCKS
   Base: 1rem = 18px @ 1440px
   ========================================================================== */
html { font-size: clamp(15px, 1.25vw, 18px); }
@media (min-width: 1700px) { html { font-size: clamp(18px, 1.117vw, 19px); } }
@media (min-width: 1920px) { html { font-size: clamp(19px, 1vw, 20px); } }
@media (min-width: 2560px) { html { font-size: clamp(20px, 0.82vw, 22px); } }
@media (min-width: 5120px) { html { font-size: clamp(22px, 0.45vw, 24px); } }
@media (max-width: 768px)  { html { font-size: 16px; } }


/* ==========================================================================
   SVG MASKS MECHANISM
   ========================================================================== */
[data-mask] {
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    overflow: hidden; 
}

/* Mappings */
[data-mask="blob-1"] { -webkit-mask-image: url('assets/img/blob-1.svg'); mask-image: url('assets/img/blob-1.svg'); }
[data-mask="mask-1"] { -webkit-mask-image: url('assets/img/mask-1.svg'); mask-image: url('assets/img/mask-1.svg'); }
[data-mask="mask-2"] { -webkit-mask-image: url('assets/img/mask-2.svg'); mask-image: url('assets/img/mask-2.svg'); }
[data-mask="mask-3"] { -webkit-mask-image: url('assets/img/mask-3.svg'); mask-image: url('assets/img/mask-3.svg'); }
[data-mask="mask-4"] { -webkit-mask-image: url('assets/img/mask-4.svg'); mask-image: url('assets/img/mask-4.svg'); }
[data-mask="mask-5"] { -webkit-mask-image: url('assets/img/mask-5.svg'); mask-image: url('assets/img/mask-5.svg'); }
[data-mask="mask-6"] { -webkit-mask-image: url('assets/img/mask-6.svg'); mask-image: url('assets/img/mask-6.svg'); }
[data-mask="mask-7"] { -webkit-mask-image: url('assets/img/mask-7.svg'); mask-image: url('assets/img/mask-7.svg'); }
[data-mask="mask-8"] { -webkit-mask-image: url('assets/img/mask-8.svg'); mask-image: url('assets/img/mask-8.svg'); }
[data-mask="mask-9"] { -webkit-mask-image: url('assets/img/mask-9.svg'); mask-image: url('assets/img/mask-9.svg'); }
[data-mask="mask-10"] { -webkit-mask-image: url('assets/img/mask-10.svg'); mask-image: url('assets/img/mask-10.svg'); }
[data-mask="mask-11"] { -webkit-mask-image: url('assets/img/mask-11.svg'); mask-image: url('assets/img/mask-11.svg'); }
[data-mask="mask-12"] { -webkit-mask-image: url('assets/img/mask-12.svg'); mask-image: url('assets/img/mask-12.svg'); }
[data-mask="mask-13"] { -webkit-mask-image: url('assets/img/mask-13.svg'); mask-image: url('assets/img/mask-13.svg'); }
[data-mask="mask-14"] { -webkit-mask-image: url('assets/img/mask-14.svg'); mask-image: url('assets/img/mask-14.svg'); }
[data-mask="mask-15"] { -webkit-mask-image: url('assets/img/mask-15.svg'); mask-image: url('assets/img/mask-15.svg'); }


body {
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-lava-dark);
    background-color: var(--c-cream); /* Background defaults to cream/light */
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}

/* Core Layout Classes */
.wrap--wide {
    width: 100%;
    padding: 0 var(--gutter-wide);
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.444rem;
    padding: 0.666rem 1.666rem;
    border-radius: 999px;
    font-family: var(--ff-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: var(--t-base);
    text-align: center;
}
.btn--yellow {
    background-color: var(--c-yellow);
    color: var(--c-lava-dark);
}
.btn--yellow:hover {
    background-color: var(--c-lava-light);
}
.btn--purchase::after {
    content: '';
    width: 0.666rem;
    height: 0.666rem;
    background-image: url('assets/img/icon-chevron-down.svg'); /* Need this SVG */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform var(--t-fast);
}
.btn--purchase[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    color: var(--c-lava-light);
    border-bottom: 1px solid var(--lava-light, #CAC2AF);
     background: rgba(56, 52, 50, 0.80);
     backdrop-filter: blur(6.400000095367432px);
}
.header__wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__right {
    display: flex;
    align-items: center;
    gap: 1.666vw;
}

/* Hamburger */
.bt_menu {
    position: relative;
    width: 1.666rem;
    height: 1.666rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.333rem;
}
.bt_menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-lava-light);
    border-radius: 1px;
    transition: var(--t-base);
}
body.mopen .bt_menu span:nth-child(1) { transform: translateY(0.45rem) rotate(45deg); }
body.mopen .bt_menu span:nth-child(2) { opacity: 0; }
body.mopen .bt_menu span:nth-child(3) { transform: translateY(-0.45rem) rotate(-45deg); }

/* Navigation */
.header__nav { display: block; }
.header__menu {
    display: flex;
    align-items: center;
    gap: 1.666vw;
}
.header__menu a {
    font-size: 0.888rem;
    font-weight: 400;
    transition: color var(--t-fast);
}
.header__menu a:hover,
.header__menu .current-menu-item > a {
    color: var(--c-yellow);
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.333rem;
    font-size: 0.888rem;
    transition: color var(--t-fast);
}
.lang-switcher::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-image: url('assets/img/icon-globe.svg'); /* Need this SVG */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.lang-switcher:hover { color: var(--c-yellow); }

/* Purchase Dropdown */
.purchase-dd { position: relative; }
.purchase-dd__menu {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    min-width: 11rem;
    background-color: var(--c-lava-dark);
    border-radius: 1rem;
    padding: 0.555rem;
    display: flex;
    flex-direction: column;
    gap: 0.222rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: all var(--t-base);
    z-index: var(--z-dropdown);
}
.purchase-dd:has(> .btn--purchase[aria-expanded="true"]) .purchase-dd__menu, /* Modern CSS selector */
.purchase-dd.is-active .purchase-dd__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.purchase-dd__menu a {
    display: block;
    padding: 0.666rem 1rem;
    background-color: var(--c-yellow);
    color: var(--c-lava-dark);
    font-weight: 700;
    font-size: 0.888rem;
    border-radius: 999px;
    text-align: center;
    transition: background-color var(--t-fast);
}
.purchase-dd__menu a:hover { background-color: var(--c-lava-light); }

/* Logo */
.header__logo {
    display: block;
    height: 2.777vw; /* ~40px @ 1440 */
}
.header__logo img {
    height: 100%;
    width: auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    position: relative;
    background-color: var(--c-lava-dark);
    color: var(--c-lava-light);
    padding: 6.944vw 0 1.666vw; /* ~100px top padding @ 1440px */
    font-size: 0.888rem;
    overflow: hidden; /* For the background text */
}

/* Background Decorative Text */
.footer__bg-text {
    position: absolute;
    bottom: -15%; /* Adjust based on exact design */
    left: -5%;
    font-family: var(--ff-headings);
    font-size: 20vw; /* HUGE text */
    line-height: 0.8;
    color: rgba(232, 229, 222, 0.05); /* very faint var(--c-lava-light) */
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    writing-mode: vertical-rl; /* Creates the vertical look from the design */
    transform: rotate(180deg);
}

.footer__wrap {
    position: relative;
    z-index: 1;
    display: grid;
    /* 4 columns. Cols 1,2 (menus) are narrow. Col 3 (contact) is medium. Col 4 (logo/social) takes remaining space and aligns left */
    grid-template-columns: auto auto 1fr auto;
    gap: 4.166vw; /* ~60px @ 1440px */
    margin-bottom: 4.166vw;
}

/* Menus (Cols 1 & 2) */
.footer__menu {
    display: flex;
    flex-direction: column;
    gap: 1.111rem;
}
.footer__menu a {
    transition: color var(--t-fast);
}
.footer__menu a:hover { color: var(--c-yellow); }

/* Contact (Col 3) */
.footer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align to visual right within its column, or left? The design shows it in the middle. Let's stick to flex-end (right in RTL) to push it away from the logo */
}
.footer__contact ul {
    display: flex;
    flex-direction: column;
    gap: 1.111rem;
    text-align: right;
}
.contact-item p,
.contact-item a {
    color: var(--c-lava-light);
    font-style: normal;
}

/* Col 4: Brand & Social */
.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align contents to visual left (which is flex-end in RTL) */
    gap: 2.222rem;
}

.footer__logo {
    display: block;
}
.footer__logo img {
    max-width: 14vw; /* Scale logo with viewport */
    height: auto;
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 0.888rem;
}
.footer__social a {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--c-stone);
    background-position: center;
    background-size: 50% auto;
    background-repeat: no-repeat;
    transition: background-color var(--t-base);
}
.footer__social a:hover { background-color: var(--c-yellow); }

/* Bottom Bar */
.footer__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Credits right, Copyright left (in RTL) */
    border-top: 1px solid rgba(232, 229, 222, 0.1);
    padding-top: 1.666vw;
    font-size: 0.777rem;
    color: var(--c-stone);
}
.credits a {
    color: var(--c-lava-light);
    transition: color var(--t-fast);
}
.credits a:hover { color: var(--c-yellow); }

/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-main { flex-grow: 1; }



/* ==========================================================================
   BUTTON EXTENSIONS
   ========================================================================== */
.btn--lava {
    background-color: var(--c-lava-dark);
    color: var(--c-lava-light);
}
.btn--lava:hover {
    background-color: var(--c-yellow);
    color: var(--c-lava-dark);
}
.btn--outline {
    background-color: transparent;
    color: var(--c-lava-dark);
    border: 1px solid var(--c-lava-dark);
}
.btn--outline:hover {
    background-color: var(--c-lava-dark);
    color: var(--c-lava-light);
}

/* ==========================================================================
   SINGLE ACTIVITY: HERO
   ========================================================================== */
.activity-hero {
    position: relative;
    height: 40vw; /* ~576px @ 1440 */
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 5vw;
}
.activity-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.activity-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.activity-hero__overlay {
    position: absolute;
    inset: 0;
    /* Diagonal cut logic: using clip-path on the overlay or simply a gradient */
    background: linear-gradient(to top, rgba(56, 52, 50, 0.8) 0%, transparent 60%);
    /* For the sharp diagonal cut seen in design, a pseudo element is better */
}
.activity-hero__overlay::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 5vw;
    background-color: var(--c-lava-light); /* Matches body bg */
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 100%, 0 0);
    /* Note: adjust polygon based on the exact shape from Figma. This creates a "V" shape at the bottom. */
}

.activity-hero__content {
    position: relative;
    z-index: 1;
    color: var(--c-white);
    text-align: right;
}
.activity-hero__text h1 { margin-bottom: 1vw; }


/* ==========================================================================
   SINGLE ACTIVITY: INFO GRID
   ========================================================================== */
.activity-info {
    margin-top: 4vw;
}
.activity-info__grid {
    display: grid;
    /* Main content takes 2 parts, Sidebar takes 1 part */
    grid-template-columns: 2fr 1fr; 
    gap: 5vw;
}

/* MAIN CONTENT */
.activity-audience {
    display: flex;
    gap: 2vw;
    margin-bottom: 3vw;
    border-bottom: 1px solid rgba(56, 52, 50, 0.1);
    padding-bottom: 1vw;
}
.activity-audience__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-lava-dark);
}
.activity-audience__icon {
    width: 2rem; height: 2rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.activity-desc { margin-bottom: 3vw; }
.activity-desc p { margin-bottom: 1rem; }

/* GALLERY GRID */
.activity-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
}
.activity-gallery .img-wrap {
    display: block;
    position: relative;
    border-radius: 1rem; /* Adjust based on design rounded corners */
    overflow: hidden;
}
.activity-gallery .img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.activity-gallery .img-wrap:hover img {
    transform: scale(1.05);
}
.activity-gallery__col-main .img-wrap { height: 100%; min-height: 300px; }
.activity-gallery__col-sub {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.activity-gallery__col-sub > .img-wrap { flex: 1; min-height: 150px; }
.activity-gallery__row-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
    flex: 1;
}
.activity-gallery__row-sub .img-wrap { height: 150px; }
.img-wrap--more::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(56,52,50,0.5);
}
.more-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center; justify-content: center;
    color: var(--c-white);
    z-index: 1;
}

/* SIDEBAR (Tickets) */
.activity-info__sidebar { position: relative; }
.tickets-widget {
    background-color: var(--c-lava-light); /* Placeholder color for the khaki box */
    border-radius: 2rem;
    padding: 3vw;
    text-align: center;
    position: relative;
    z-index: 1;
}
.tickets-widget__title { margin-bottom: 2vw; }
.tickets-widget__bg-text {
    position: absolute;
    top: 50%; right: -50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: var(--ff-headings);
    font-size: 8vw;
    color: rgba(56, 52, 50, 0.05);
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
}


/* ==========================================================================
   WHAT WE DO
   ========================================================================== */
.activity-wwd { margin-top: 6vw; }
.activity-wwd h2 { margin-bottom: 2vw; }
.activity-wwd__content ul {
    list-style: none;
}
.activity-wwd__content ul li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.5rem;
}
.activity-wwd__content ul li::before {
    content: '';
    position: absolute;
    top: 0.5rem; right: 0;
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    background-color: var(--c-lava-dark);
}


/* ==========================================================================
   FAQ
   ========================================================================== */
.activity-faq { margin-top: 6vw; }
.activity-faq h2 { margin-bottom: 2vw; }
.faq-accordion {
    border-top: 1px solid rgba(56,52,50,0.2);
}
.faq__item {
    border-bottom: 1px solid rgba(56,52,50,0.2);
}
.faq__btn {
    width: 100%;
    text-align: right;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq__icon {
    width: 1rem; height: 1rem;
    position: relative;
}
.faq__icon::before, .faq__icon::after {
    content: '';
    position: absolute;
    background-color: var(--c-lava-dark);
    transition: transform var(--t-base);
}
.faq__icon::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.faq__icon::after { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.faq__item[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); }

.faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base);
}
.faq__item[aria-expanded="true"] .faq__panel { grid-template-rows: 1fr; }
.faq__panel-inner { overflow: hidden; padding-bottom: 1.5rem; }


/* ==========================================================================
   MORE OPTIONS
   ========================================================================== */
.activity-more { margin-top: 6vw; }
.activity-more__header {
    border-bottom: 1px solid rgba(56,52,50,0.2);
    padding-bottom: 1vw;
    margin-bottom: 3vw;
}
.activity-more__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    margin-bottom: 3vw;
}
.card-option {
    display: block;
    background-color: var(--c-lava-light);
    border-radius: 1rem;
    overflow: hidden;
    text-align: center;
    /* Custom clip-path based on design can be added here */
}
.card-option__img img { width: 100%; height: 200px; object-fit: cover; }
.card-option__title { padding: 1.5rem; }
.activity-more__action { text-align: center; }


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.activity-newsletter { margin-top: 6vw; margin-bottom: 6vw; }
.newsletter-box {
    background-color: var(--c-lava-dark);
    color: var(--c-lava-light);
    border-radius: 2rem;
    padding: 4vw 2vw;
    text-align: center;
    /* bg image? */
}
.newsletter-box__title { margin-bottom: 0.5vw; }
.newsletter-box__lead { margin-bottom: 2vw; opacity: 0.8; }
.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
}
.newsletter-form__group {
    display: flex;
    border-bottom: 1px solid rgba(232,229,222,0.5);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.newsletter-form__group input {
    flex: 1;
    color: var(--c-white);
}
.newsletter-form__group input::placeholder { color: rgba(232,229,222,0.5); }
.newsletter-form__consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}


/* ==========================================================================
   HOME PAGE: HERO
   ========================================================================== */
.home-hero {
    /* Using specific background color from design, looks like a dark brown/red tint */
    background-color: #383432; /* Update this hex if different in your Figma */
    color: var(--c-lava-light);
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.home-hero__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.home-hero__wrap {
   padding-left: 0;
}

.home-hero__content {
    width: 35%;
    will-change: transform, opacity;
}

.home-hero__title {
   font-family: 'gipsy';
   font-size: 5.33333333rem;
    line-height: 0.84;
    margin-bottom: 2.222rem;
    color: var(--c-lava-light);
}

.home-hero__lead {
    font-size: 1.44444444rem;
    max-width: 88%;
}

.home-hero__visual {
    width: 60%;
    display: flex;
    justify-content: flex-end;
    will-change: transform, opacity;
}

.home-hero__temp-img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   HOME PAGE: QUICK LINKS
   ========================================================================== */
.home-quick-links {
    background-color: #383432;
    padding-top: 4.166vw;
    padding-bottom: 6vw;
    position: relative;
    z-index: 10;
    will-change: transform;
}

.quick-links__header {
    border-bottom: 2px solid var(--c-lava-light);
    padding-bottom: 1.111vw;
    margin-bottom: 4.166vw;
    display: flex;
}

.quick-links__title {
    color: var(--c-lava-light);
    margin: 0;
}

.quick-links__grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 5vw;
}

.ql-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--c-lava-light);
    transition: color var(--t-fast);
    cursor: pointer;
}

.ql-item:hover {
    font-weight: 900;
}

/* הקונטיינר הראשי של כל פריט ויזואלי */
.ql-item__visual {
    width: 11.27777778rem; /* הגדלתי מעט כדי לתת מקום לאייקון הגדול בהתחלה */
    height: 13.27777778rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* האייקון - מתחיל גדול יותר */
.ql-item__icon {
    position: relative;
    z-index: 5;
    width: 6.5rem; /* גדול בהתחלה */
    height: 6.5rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* אנימציה אלגנטית להתכווצות */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center;
}

/* קונטיינר התמונות (עם המסיכה) */
.ql-item__seq {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    /* מתחיל נמוך יותר כדי שיוכל "לצוף" למעלה */
    transform: translateY(2.5rem);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
}

/* התמונות בתוך המסיכה */
.ql-item__seq img {
    position: absolute;
    inset: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* מעבר פייד רך בין התמונות עצמן */
    transition: opacity 0.8s ease-in-out; 
}

.ql-item__seq img.is-active {
    opacity: 1;
}

/* הטקסט התחתון */
.ql-item__label {
    text-align: center;
    /* מוכן לדחיפה למטה */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    font-size: 1.44444444rem;
    margin-top: -1rem;
}

/* --- מצב הריחוף (Hover) הכולל --- */

.ql-item:hover .ql-item__seq {
    opacity: 1;
    visibility: visible;
    /* התמונה צפה למקומה הטבעי (Fade In Up) */
    transform: translateY(0);
}

.ql-item:hover .ql-item__icon {
    /* האייקון מתכווץ פנימה ומתמרכז על התמונה */
    transform: scale(0.7);
}

.ql-item:hover .ql-item__label {
    /* הטקסט נדחף למטה בעדינות */
    transform: translateY(1.5rem);
}


/* ==========================================================================
   HOME PAGE: VIDEO BANNER (YOUTUBE)
   ========================================================================== */
.home-video-banner {
    position: relative;
    width: 100%;
    height: 45vw; /* גובה הסקשן */
    min-height: 400px;
    overflow: hidden;
}

.video-bg-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* טריק לשמירה על יחס 16:9 שתמיד מכסה את המסך (Cover) */
    width: 100vw;
    height: 56.25vw; /* 100 * (9 / 16) */
    
    /* מניעת שוליים שחורים במובייל כשהגובה המינימלי קבוע ל-400px */
    min-height: 400px;
    min-width: 711.11px; /* 400 * (16 / 9) */
    
    pointer-events: none; /* מונע כל אינטראקציה עם הוידאו (לחיצה/עצירה) */
}

/* שכבת מגן מעל הוידאו */
.home-video-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* אפשר להוסיף כאן background שקוף למחצה אם רוצים להכהות את הוידאו */
    /* background: rgba(56, 52, 50, 0.1); */
}


/* ==========================================================================
   BUTTON EXTENSIONS (Gipsy variants based on Figma)
   ========================================================================== */
.btn--gipsy-outline,
.btn--gipsy-solid {
    display: inline-flex;
    padding: 0.833rem 1.277rem; /* 15px 23px */
    justify-content: center;
    align-items: center;
    gap: 0.555rem; /* 10px */
    font-family: var(--ff-headings); /* Fb Gipsy */
    font-size: 1rem; /* 18px */
    font-weight: 400;
    line-height: 1.13;
    border-radius: 999px; 
    transition: var(--t-base);
}

.btn--gipsy-outline {
    color: var(--c-lava-dark);
    border: 1px solid var(--c-lava-dark);
    background: transparent;
}

.btn--gipsy-outline:hover {
    background: var(--c-lava-dark);
    color: var(--c-lava-light);
}

.btn--gipsy-solid {
    background: var(--c-lava-dark);
    color: var(--c-lava-light);
    border: 1px solid var(--c-lava-dark);
}

.btn--gipsy-solid:hover {
    background: var(--c-yellow);
    color: var(--c-lava-dark);
    border-color: var(--c-yellow);
}

/* ==========================================================================
   HOME PAGE: VISIT SECTION
   ========================================================================== */
.home-visit {
    padding: 6.944vw 0 4.166vw;
    position: relative;
    z-index: 10;
}

.home-visit__wrap {
    display: grid;
    /* ב-RTL: העמודה הראשונה (1) היא הימנית. נותנים לה 40% מהרוחב, והשאר 60% לעמודה השמאלית */
    grid-template-columns: 40% 60%; 
    align-items: start;
    position: relative;
}

/* התמונה מתפרסת על כל הגריד (2 העמודות) וקובעת את גובה הסקשן */
.home-visit__visual {
    grid-column: 1 / -1; 
    grid-row: 1;
    z-index: 1;
    width: 100%;
}

.home-visit__visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* הטקסט מוגבל רק לעמודה הימנית ויושב על אותה השורה של התמונה */
.home-visit__content {
    grid-column: 1; /* עמודה ימנית */
    grid-row: 1; /* אותה שורה של התמונה -> יצירת חפיפה */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 4vw; /* ריווח מלמעלה כדי שלא יידבק לקצה */
    padding-left: 2vw; /* ריווח קל מהתמונות שמשמאלו */
}

/* טיפוגרפיה */
.home-visit__subtitle {
    color: var(--c-lava-dark);
    font-family: var(--ff-body);
    font-size: 1rem; /* 18px */
    font-weight: 400;
    line-height: 1.17;
    margin-bottom: 0.555rem;
}

.home-visit__title {
    color: var(--c-lava-dark);
    font-family: var(--ff-headings);
    font-size: 2.666rem; /* 48px */
    font-weight: 400;
    line-height: 1.13;
    margin-bottom: 1.666rem;
}

.home-visit__text {
    color: var(--c-lava-dark);
    font-family: var(--ff-body);
    font-size: 1.222rem; /* 22px */
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 2.777rem; /* ~50px */
}

.home-visit__actions {
    display: flex;
    gap: 1.111rem; /* ~20px */
    flex-wrap: wrap;
}

/* פאגינציה (הכנה לסליידר) */
.home-visit__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2vw; /* מרווח מתחת לתמונה */
    
    /* עיצוב ה"כדור" הלבן המעוגל */
    background-color: var(--c-white);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.visit-nav-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast);
}

.visit-nav-btn:hover {
    transform: scale(1.1);
}

.visit-nav-btn img {
    width: 0.5rem; /* גודל החץ */
    height: auto;
}

/* ==========================================================================
   HOME PAGE: DREAMS SECTION
   ========================================================================== */
.home-dreams {
    background-color: var(--c-lava-dark);
    padding: 6.944vw 0 10vw; /* פאדינג תחתון גדול יותר כדי לפנות מקום ללוח שנה */
    position: relative;
    z-index: 20; 
}

.home-dreams__wrap {
    position: relative;
}

.home-dreams__grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* התמונה והסליידר (60rem = 1080px) */
.home-dreams__visual {
    position: relative;
    flex: 0 0 60rem; /* כופה רוחב מוחלט של 1080 פיקסלים */
    width: 60rem;
    margin-left: -10vw; /* דוחף שמאלה כדי שייחתך בקצה המסך כמו בעיצוב */
    will-change: transform; 
    z-index: 1;
}

/* הכתם הכחול */
.home-dreams__stain {
    position: absolute;
    bottom: -25vw; /* יורד עמוק לתוך הסקשן התכלת של האירועים */
    left: 0;
    width: 100%; /* ממלא את כל ה-1080px */
    z-index: 1; /* נשאר מתחת לסליידר */
    pointer-events: none;
}

/* מעטפת הסליידר במסיכה (850px גובה) */
.home-dreams__slider {
    position: relative;
    z-index: 2; /* מעל הכתם */
    width: 100%;
    aspect-ratio: 108 / 85; /* שומר על יחס של 1080x850 בדיוק! */
    
    -webkit-mask-image: url('assets/img/mask-dreams.svg');
    mask-image: url('assets/img/mask-dreams.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center left;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.temp-slider-fade { width: 100%; height: 100%; position: relative; }
.temp-slider-fade img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.5s ease; /* פייד ארוך ורך יותר */
}
.temp-slider-fade img.is-active { opacity: 1; }

/* טקסט */
.home-dreams__content {
    width: 35%; /* שומר את הטקסט בעמודה מסודרת מימין */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.home-dreams__subtitle { color: var(--c-lava-light); margin-bottom: 0.5rem; }
.home-dreams__title {
    color: var(--c-lava-light); font-family: var(--ff-headings);
    font-size: 2.666rem; line-height: 1.13; margin-bottom: 1.5rem;
}
.home-dreams__text {
    color: var(--c-lava-light); font-size: 1.222rem; line-height: 1.25; margin-bottom: 1rem;
}
.home-dreams__link {
    color: var(--c-lava-light); text-decoration: underline; font-weight: 700; margin-bottom: 3vw;
}

/* --- Calendar Widget (Absolute & Centered) --- */
.calendar-widget {
    position: absolute;
    bottom: -13vw; /* דוחף אותו למטה כדי שיחפוף עם הסקשן הבא */
    left: 50%;
    transform: translateX(-50%); /* ממורכז לאמצע הסקשן (עובד גם ב-RTL) */
    width: 80vw;
    max-width: 1000px;
    background-color: var(--c-cream);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 50; /* מעל הכל */
}

.calendar-widget__field {
    flex: 1;
    border-left: 1px solid rgba(56,52,50,0.2);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
}
.calendar-widget__field:last-of-type { border-left: none; }

.cw-label { font-size: 0.777rem; font-weight: 700; margin-bottom: 0.2rem; }
.cw-input { display: flex; align-items: center; gap: 0.5rem; }
.cw-val-big { font-size: 1.5rem; font-weight: 700; font-family: var(--ff-headings); }
.cw-val-small { font-size: 0.7rem; line-height: 1.1; }
.cw-submit { margin-right: 1rem; padding: 0.8rem 1.5rem; white-space: nowrap; }

/* ==========================================================================
   HOME PAGE: EVENTS SECTION
   ========================================================================== */
   
   /* ==========================================================================
      HOME PAGE: EVENTS SECTION - TYPOGRAPHY & HEADER
      ========================================================================== */
   .home-events__header {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       margin-bottom: 3vw;
   }
   
   .home-events__titles {
       display: flex;
       flex-direction: column;
   }
   
   .home-events__subtitle {
       color: var(--c-blue-dark);
       font-family: var(--ff-body);
       font-size: 1rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }
   
   .home-events__title {
       color: var(--c-blue-dark);
       font-family: var(--ff-headings);
       font-size: 2.666rem; /* 48px */
       font-weight: 400;
       line-height: 1.13;
       margin: 0;
   }
   
   /* הפילטרים משמאל לכותרת */
   .events-filters {
       display: flex;
       gap: 0.5rem;
   }
   
   .filter-btn {
       border: 1px solid var(--c-blue-dark);
       color: var(--c-blue-dark);
       background: transparent;
       border-radius: 999px;
       padding: 0.3rem 1rem;
       font-family: var(--ff-body);
       font-size: 0.888rem;
       cursor: pointer;
       transition: var(--t-fast);
   }
   
   .filter-btn:hover, 
   .filter-btn.is-active {
       background-color: var(--c-blue-dark);
       color: var(--c-blue-light);
   }
.home-events {
    /* כפייה של הצבע התכלת למקרה שהמשתנה לא נטען משום מה */
    background-color: #ABCBED; 
    padding: 12vw 0 6vw; /* פאדינג עליון גדול יותר בגלל הלוח שנה שחופף מעליו */
    position: relative;
    z-index: 10;
    overflow: hidden;
}

/* שאר ה-CSS של הסקשן (טקסטים, פילטרים) נשאר, מחליפים רק את הכרטיסיות: */
.events-grid-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5vw;
}

/* מסתירים דפים לא פעילים */
.events-grid-page:not(.is-active) { display: none; }

.event-card {
    display: flex;
    flex-direction: column;
    color: var(--c-blue-dark);
}

/* המבנה הקריטי לתמונה יציבה שלא קורסת! */
.event-card__img {
    position: relative;
    width: 100%;
    padding-top: 100%; /* יחס 1:1 מדויק שמונע קריסה */
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 1.2rem;
    background-color: rgba(25, 56, 94, 0.1); /* צבע רקע במקרה שאין תמונה */
}

.event-card__img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* אנימציית זום אין איטית ואלגנטית */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.event-card:hover .event-card__img img {
    transform: scale(1.08); /* תנועה עדינה יותר */
}

.event-card__badge {
    position: absolute;
    top: 1rem; right: 1rem;
    background-color: var(--c-blue-dark);
    color: var(--c-blue-light);
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 0.777rem;
    z-index: 2;
}
.event-card__badge--light { background-color: var(--c-lava-light); color: var(--c-lava-dark); }
.event-card__badge--yellow { background-color: var(--c-yellow); color: var(--c-lava-dark); }

.event-card__title { margin-bottom: 0.3rem; }