/* ============================================================
   Programme de fidélité — page d'atterrissage /surf_and_save/
   Design : "SRF PARK TLV Loyalty Landing" (projet claude.ai/design
   "SRF landing discount"). RTL. Rendu par views/loyalty/landing.php.

   Header / top bar / footer viennent du layout du site : rien ici.
   Tout est préfixé .lyl-lp- pour n'altérer aucun style existant.

   Palette du design : #1c3a43 (teal) · #24474f (hover) · #bee3dd (mint)
   #d9ccbc (sable) · #e9e0d3 (sable clair, bordures) · #6b7b7e (gris)
   Typo : Almoni (site) pour le texte, Anton + Caveat pour le wordmark.
   ============================================================ */
.lyl-lp,
.lyl-lp * {box-sizing: border-box;}
.lyl-lp {width: 100%; color: #1c3a43; font-family: 'Almoni Medium', sans-serif; background: #fff; direction: rtl; overflow-x: hidden;}
.lyl-lp p {margin: 0;}
.lyl-lp a {color: #1c3a43;}
.lyl-lp a:hover {color: #24474f;}
/* Ancres (/surf_and_save/#takanon…) : le header du site est sticky top:0, donc la
   cible d'une ancre vient se caler dessous. On réserve sa hauteur : bandeau 36px +
   header 98px = 134px (voir .strip_top / .wrap_header header dans app.css), + 40px
   de respiration au-dessus de la cible. */
.lyl-lp section[id] {scroll-margin-top: 174px;}

/* ---- באנר / hero ---- */
/* cadre de la photo de fond (relative + overflow) ; sans photo le fond sable du
   design reste visible tel quel. Photo ET titre sont en absolute : plus rien ne
   porte la hauteur du bandeau, d'où le min-height (sinon il se réduit aux paddings) */
.lyl-lp__hero {position: relative; min-height: clamp(320px, 38vw, 520px); padding: clamp(48px, 8vw, 90px) 24px; text-align: center; background: #d9ccbc; overflow: hidden;}
/* le <picture> porte le cadre absolu (il est inline par défaut) et l'image le
   remplit : couvre toute la bannière sans se déformer, quel que soit son ratio */
.lyl-lp__hero-media {position: absolute; inset: 0; z-index: 0;}
.lyl-lp__hero-bg {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
/* remplit le hero pour que le titre puisse s'ancrer sur son bas ; porte aussi le
   z-index qui garde le contenu au-dessus de la photo */
.lyl-lp__hero-inner {position: absolute; inset: 0; z-index: 1;}
.lyl-lp__wordmark {display: flex; flex-direction: column; color: #1c3a43; line-height: 0.95; direction: ltr;}
.lyl-lp__wordmark-a {font-family: 'Anton', 'Almoni Bold', sans-serif; font-size: clamp(40px, 11vw, 110px); letter-spacing: 2px;}
.lyl-lp__wordmark-b {margin-top: 4px; font-family: 'Caveat', 'Almoni Bold', cursive; font-size: clamp(40px, 11vw, 110px); font-weight: 700; letter-spacing: 2px;}
/* ancré à 50px du bas du bandeau ; right/left 0 + padding pour rester centré et
   ne pas coller aux bords (le parent absolu n'a pas de padding) */
.lyl-lp__hero-title {position: absolute; right: 0; bottom: 50px; left: 0; padding: 0 24px; margin: 0; color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: clamp(20px, 3.2vw, 32px); font-weight: 400; line-height: 1.25;}

/* ---- קוביות / les 3 cubes ---- */
.lyl-lp__how {padding: clamp(40px, 6vw, 64px) 16px 0;}
.lyl-lp__intro {padding: 0 8px; margin: 0 auto; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; text-align: center;}
/* une colonne par palier de remise (3 ou 4) : --lyl-lp-cubes est posé en inline */
.lyl-lp__cubes {display: grid; grid-template-columns: repeat(var(--lyl-lp-cubes, 3), 1fr); gap: 12px; align-items: stretch; max-width: 900px; padding: 24px 0 0; margin: 0 auto;}
.lyl-lp__cube {display: flex; flex-direction: column; align-items: stretch; height: 100%; padding: clamp(12px, 3vw, 20px) clamp(8px, 2.4vw, 16px); text-align: center; background: #fff; border: 1px solid #e9e0d3; border-radius: 14px;}
.lyl-lp__cube--hl {background: #bee3dd;}
.lyl-lp__cube-title {display: flex; align-items: center; justify-content: center; min-height: 32px; color: #6b7b7e; font-family: 'Almoni Bold', sans-serif; font-size: 16px; letter-spacing: 0.3px; line-height: 1.25;}
.lyl-lp__cube-value {display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 6px 0; color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: clamp(20px, 6.5vw, 36px); line-height: 1;}
.lyl-lp__cube-value--sm {font-size: 16px; white-space: nowrap;}
.lyl-lp__cubes-note {padding: 20px 24px 0; margin: 0 auto; color: #6b7b7e; font-size: 15px; text-align: center;}

/* ---- טבלת מחירים ---- */
.lyl-lp__prices {max-width: 900px; padding: clamp(48px, 6vw, 72px) 0; margin: 0 auto;}
.lyl-lp__h2 {margin: 0 0 28px; color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 400; text-align: center;}
.lyl-lp__table {border: 1px solid #e9e0d3; border-radius: 18px; overflow: hidden;}
/* colonne libellé + une colonne par segment : --lyl-lp-cols est posé en inline */
.lyl-lp__tr {display: grid; grid-template-columns: 1.3fr repeat(var(--lyl-lp-cols, 3), 1fr);}
.lyl-lp__tr--head {background: #1c3a43;}
.lyl-lp__tr--hl {background: #bee3dd;}
.lyl-lp__th {padding: 16px; color: #fff; font-family: 'Almoni Bold', sans-serif; font-size: 16px; text-align: center;}
.lyl-lp__td {padding: 18px 16px; text-align: center; border-top: 1px solid #e9e0d3;}
.lyl-lp__td--label {text-align: right;}
.lyl-lp__row-label {color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: 15px;}
.lyl-lp__row-sub {margin-top: 2px; color: #6b7b7e; font-size: 14px;}
.lyl-lp__price {color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: 18px;}
.lyl-lp__savings {margin-top: 2px; color: #6b7b7e; font-size: 14px;}

/* cartes mobile (une par colonne) — masquées en desktop */
.lyl-lp__cards {display: none;}
.lyl-lp__card {margin-bottom: 16px; background: #fff; border: 1px solid #e9e0d3; border-radius: 18px; overflow: hidden;}
.lyl-lp__card-head {padding: 14px 18px; color: #fff; font-family: 'Almoni Bold', sans-serif; font-size: 15px; text-align: center; background: #1c3a43;}
.lyl-lp__card-row {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid #e9e0d3;}
.lyl-lp__card-row--hl {background: #bee3dd;}
.lyl-lp__card-price {text-align: left;}

/* ---- כפתור הזמנה ---- */
.lyl-lp__cta {padding: 0 20px clamp(48px, 6vw, 72px); text-align: center;}
/* sélecteur scopé `.lyl-lp a.lyl-lp__btn` (et pas `.lyl-lp__btn`) : sinon la règle
   de lien `.lyl-lp a` est plus spécifique et repasse le texte en teal */
.lyl-lp a.lyl-lp__btn {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; min-height: 44px; padding: 16px 24px; margin: 0 auto; color: #fff; font-family: 'Almoni Bold', sans-serif; font-size: 16px; text-decoration: none; background: #1c3a43; border-radius: 999px;}
.lyl-lp a.lyl-lp__btn:hover {color: #fff; text-decoration: none; background: #24474f;}
.lyl-lp__cta-note {margin-top: 20px !important; color: #6b7b7e; font-size: 14px; line-height: 1.6;}

/* ---- שאלות ותשובות ---- */
/* Bloc FAQ standard du site (views/pages/_questions.php) : l'accordéon, le chevron
   et le bouton "קרא עוד" sont déjà stylés par `body section#faq` dans app.css — on ne
   reprend ici que ce qui dépend de la page : la largeur (.container_big fait 1600px
   en dur, hors sujet sur cette colonne de 900px) et le titre, calé sur .lyl-lp__h2.
   Le margin des <p> est rétabli, `.lyl-lp p {margin: 0}` collant sinon les
   paragraphes d'une réponse. */
.lyl-lp__faq {padding: 0 20px clamp(48px, 6vw, 72px);}
.lyl-lp__faq .container_big {width: 100%; max-width: 900px; margin: 0 auto;}
.lyl-lp__faq .section_title h2 {margin: 0 0 28px; color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 400; text-align: center;}
.lyl-lp__faq .accordion-body p {margin: 0 0 10px;}
.lyl-lp__faq .accordion-body p:last-child {margin-bottom: 0;}

/* ---- תקנון ---- */
.lyl-lp__terms {padding: 32px 24px; color: #1c3a43; background: #e9e0d3;}
.lyl-lp__terms-inner {max-width: 720px; margin: 0 auto;}
.lyl-lp__terms-title {margin-bottom: 12px; color: #1c3a43; font-family: 'Almoni Bold', sans-serif; font-size: 16px;}
.lyl-lp__terms-list {display: flex; flex-direction: column; gap: 8px; padding: 0 20px 0 0; margin: 0; list-style: disc;}
.lyl-lp__terms-list li {color: #6b7b7e; font-size: 14px; line-height: 1.7;}

/* ============ responsive ============ */
/* sous 1024px le header retombe à 72px (app.css) : 36 + 72 + 40 = 148px */
@media (max-width: 1024px) {
    .lyl-lp section[id] {scroll-margin-top: 148px;}
}

@media (max-width: 600px) {
    .lyl-lp__cubes[data-count="4"] {grid-template-columns: 1fr 1fr;}
}

/* la table devient une carte par colonne — jamais de scroll horizontal */
@media (max-width: 767px) {
    .lyl-lp__cube-title {height: 40px; }
    .lyl-lp__table {display: none;}
    .lyl-lp__cards {display: block;}
    .lyl-lp__card:last-child {margin-bottom: 0;}
    .lyl-lp__card {margin-inline: 16px; margin-bottom: 24px;}
}