/*
 * ARABIDS 1.2.123 — correct calendar geometry and re-stage mobile photos.
 * This layers over v1.2.122 without changing calendar data, bids or app swiper.
 * Brand palette: wine #420B07, forest #143328, gold #A4865D, ivory #EFE6D8.
 */

/* A true, recognisable vintage-camera photograph belongs behind the app
   story, while a directional ivory veil protects the slide copy on the right
   (Arabic) or on the left (English). No decorative blank texture. */
html body:is(.home,[data-page="home"]) .how_it_works_section {
  background-color:#E4D5BF !important;
  background-image:
    linear-gradient(270deg,rgba(239,230,216,.85),rgba(239,230,216,.69) 48%,rgba(239,230,216,.30) 100%),
    url('../images/brand-atmospheres/support-camera.jpg') !important;
  background-position:center,58% center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
html:is([dir="ltr"],[data-language="en"]) body:is(.home,[data-page="home"]) .how_it_works_section {
  background-image:
    linear-gradient(90deg,rgba(239,230,216,.85),rgba(239,230,216,.69) 48%,rgba(239,230,216,.30) 100%),
    url('../images/brand-atmospheres/support-camera.jpg') !important;
}

/* Support photos: no decorative icon tiles on email, phone or address cards.
   The telephone gets its own warm photographic palette instead of a flat,
   barely visible cream background. The two official phone links remain. */
html body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-card > .as-card-icon {
  display:none !important;
}
html body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-phone-merged {
  background-color:#754D30 !important;
  background-image:
    linear-gradient(270deg,rgba(70,42,26,.83) 0%,rgba(70,42,26,.66) 57%,rgba(70,42,26,.29) 100%),
    url('../images/brand-atmospheres/support-camera.jpg') !important;
  background-position:center,72% center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  justify-content:center !important;
  border-color:rgba(164,134,93,.37) !important;
}
html body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-phone-merged :is(h3,p) {
  color:#EFE6D8 !important;
  -webkit-text-fill-color:#EFE6D8 !important;
  text-shadow:0 2px 9px rgba(38,24,15,.48) !important;
}
html body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-phone-merged .as-phone-list {
  margin-top:clamp(10px,1.5vw,21px) !important;
}
html body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-phone-merged .as-phone-link {
  background:rgba(251,245,233,.92) !important;
  border-color:rgba(239,230,216,.53) !important;
  color:#420B07 !important;
  -webkit-text-fill-color:#420B07 !important;
  text-shadow:none !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
html[dir="ltr"] body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-phone-merged {
  background-image:
    linear-gradient(90deg,rgba(70,42,26,.85),rgba(70,42,26,.65) 57%,rgba(70,42,26,.30)),
    url('../images/brand-atmospheres/support-camera.jpg') !important;
}
html body:is([data-page="support"],.arabids-support-page) .as-page-modern
  .as-contact-grid-modern > .as-contact-address {
  justify-content:center !important;
}

/* Calendar hero: previous legacy rule forces the inner banner to flex in a
   COLUMN. Giving the counter strip a flex-basis of 490px therefore created
   three absurdly tall vertical counters. Explicitly use auto-sized blocks. */
html body.calendar-page .calendar-page-hero {
  min-height:0 !important;
  height:auto !important;
  padding:clamp(43px,5vw,76px) 0 !important;
}
html body.calendar-page .calendar-hero-inner {
  display:flex !important;
  flex-flow:column nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(17px,2vw,28px) !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  padding:0 !important;
}
html body.calendar-page .calendar-hero-copy {
  flex:0 0 auto !important;
  width:min(800px,100%) !important;
  max-width:800px !important;
  min-width:0 !important;
  margin:0 auto !important;
  text-align:center !important;
}
html body.calendar-page .calendar-hero-copy .eyebrow {
  display:none !important;
}
html body.calendar-page .calendar-hero-copy h1 {
  margin:0 auto 13px !important;
  text-align:center !important;
  font-size:clamp(31px,3.9vw,52px) !important;
  line-height:1.33 !important;
}
html body.calendar-page .calendar-hero-copy p {
  max-width:750px !important;
  margin:0 auto !important;
  text-align:center !important;
  line-height:1.85 !important;
}
html[dir="ltr"] body.calendar-page .calendar-hero-copy,
html[dir="ltr"] body.calendar-page .calendar-hero-copy :is(h1,p) {
  text-align:center !important;
}
html body.calendar-page .calendar-hero-stats {
  position:relative !important;
  display:grid !important;
  flex:0 0 auto !important;
  align-self:center !important;
  justify-self:center !important;
  align-items:stretch !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  grid-auto-rows:auto !important;
  width:min(680px,100%) !important;
  max-width:680px !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 auto !important;
  gap:clamp(8px,1.2vw,13px) !important;
}
html body.calendar-page .calendar-hero-stats > div {
  display:flex !important;
  flex-flow:column nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:83px !important;
  max-height:110px !important;
  padding:11px 10px !important;
  margin:0 !important;
  background:rgba(239,230,216,.91) !important;
  border-radius:13px !important;
}
html body.calendar-page .calendar-hero-stats strong {
  margin:0 !important;
  line-height:1.14 !important;
  font-size:clamp(23px,2.6vw,31px) !important;
}
html body.calendar-page .calendar-hero-stats span {
  display:block !important;
  margin-top:7px !important;
  color:#143328 !important;
  line-height:1.4 !important;
  font-size:12px !important;
  text-align:center !important;
}
html body.calendar-page .calendar-workspace-section {
  padding-top:clamp(26px,3vw,44px) !important;
}
html body.calendar-page :is(#calendar-grid,#agenda-list,.professional-calendar-card) {
  scroll-margin-top:110px;
}

/* Mobile: every photographic chapter gets a dedicated opening photo field,
   followed by a solid brand-colour reading area. The background does not
   continue through copy or cross section boundaries. Typography remains
   readable without putting a floating white box on the picture. */
@media (max-width:820px) {
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) {
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    padding-top:clamp(218px,57vw,330px) !important;
    padding-bottom:clamp(38px,8vw,65px) !important;
    overflow:hidden !important;
    background-position:center top,center top !important;
    background-size:100% 100%,100% auto !important;
    background-repeat:no-repeat !important;
    box-shadow:none !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section {
    background-color:#143328 !important;
    background-image:
      linear-gradient(180deg,rgba(20,51,40,0) 0px,rgba(20,51,40,.20) 115px,#143328 235px),
      url('../images/brand-atmospheres/support-camera.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) .what_is_section {
    background-color:#420B07 !important;
    background-image:
      linear-gradient(180deg,rgba(66,11,7,0) 0px,rgba(66,11,7,.23) 115px,#420B07 235px),
      url('../images/brand-atmospheres/heritage-frame.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) .who_its_for_section {
    background-color:#143328 !important;
    background-image:
      linear-gradient(180deg,rgba(20,51,40,0) 0px,rgba(20,51,40,.18) 115px,#143328 235px),
      url('../images/brand-atmospheres/app-gallery.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) .faq_section {
    background-color:#420B07 !important;
    background-image:
      linear-gradient(180deg,rgba(66,11,7,0) 0px,rgba(66,11,7,.22) 115px,#420B07 235px),
      url('../images/brand-atmospheres/account-coins.jpg') !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) > .container {
    width:min(100% - 32px,650px) !important;
    max-width:650px !important;
    margin-inline:auto !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .arabids-editorial-intro {
    display:flex !important;
    flex-flow:column nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto 16px !important;
    padding:0 !important;
    gap:0 !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .arabids-editorial-heading {
    width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    margin:0 auto !important;
    padding:8px 0 !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .arabids-editorial-heading > h2.title {
    font-size:clamp(15px,3.65vw,25px) !important;
    line-height:1.48 !important;
    margin:0 auto !important;
    max-width:100% !important;
    color:#A4865D !important;
    -webkit-text-fill-color:#A4865D !important;
    text-shadow:0 2px 7px rgba(0,0,0,.28) !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section .flex,
  html body:is(.home,[data-page="home"]) :is(
    .what_is_section,.who_its_for_section,.faq_section
  ) .flex-wrap {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    gap:0 !important;
    align-items:start !important;
    justify-items:stretch !important;
  }
  html body:is(.home,[data-page="home"]) .core_benefits_section .flex > .item,
  html body:is(.home,[data-page="home"]) :is(
    .what_is_section,.who_its_for_section,.faq_section
  ) .flex-wrap > .item {
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:13px 3px 15px !important;
    margin:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    text-align:start !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .item .title {
    font-size:clamp(17px,4.15vw,21px) !important;
    line-height:1.45 !important;
    margin:0 0 7px !important;
    color:#A4865D !important;
    -webkit-text-fill-color:#A4865D !important;
  }
  html body:is(.home,[data-page="home"]) :is(
    .core_benefits_section,.what_is_section,.who_its_for_section,.faq_section
  ) .item .subtitle {
    font-size:clamp(14px,3.55vw,16px) !important;
    line-height:1.8 !important;
    margin:0 !important;
    color:#EFE6D8 !important;
    -webkit-text-fill-color:#EFE6D8 !important;
    overflow-wrap:break-word !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section {
    background-image:
      linear-gradient(180deg,rgba(239,230,216,.81),rgba(239,230,216,.84)),
      url('../images/brand-atmospheres/support-camera.jpg') !important;
    background-position:center,70% center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .container-flex {
    min-width:0 !important;
    max-width:min(600px,calc(100% - 28px)) !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section > .mobile {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    gap:clamp(10px,2vh,18px) !important;
    justify-items:center !important;
    align-items:start !important;
    max-width:100% !important;
    padding:8px 16px 26px !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .how-it-works-swiper-mobile {
    width:100% !important;
    max-width:min(480px,100%) !important;
    min-height:0 !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .how-it-works-swiper-2-mobile {
    margin:0 auto !important;
    min-width:0 !important;
    justify-self:center !important;
  }
  html body:is(.home,[data-page="home"]) .how_it_works_section .how-it-works-swiper-mobile .how-it-works-slide-content {
    padding:8px 0 !important;
    max-width:min(480px,100%) !important;
  }
}
@media (max-width:600px) {
  html body.calendar-page .calendar-page-hero {
    padding:38px 0 44px !important;
  }
  html body.calendar-page .calendar-hero-inner {
    gap:20px !important;
  }
  html body.calendar-page .calendar-hero-copy {
    width:100% !important;
    max-width:100% !important;
  }
  html body.calendar-page .calendar-hero-copy h1 {
    font-size:clamp(25px,6.4vw,34px) !important;
    line-height:1.45 !important;
  }
  html body.calendar-page .calendar-hero-copy p {
    font-size:13px !important;
    line-height:1.75 !important;
    max-width:38ch !important;
  }
  html body.calendar-page .calendar-hero-stats {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    gap:6px !important;
  }
  html body.calendar-page .calendar-hero-stats > div {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    height:auto !important;
    min-height:73px !important;
    max-height:89px !important;
    padding:9px 3px !important;
  }
  html body.calendar-page .calendar-hero-stats strong {
    font-size:clamp(21px,5vw,27px) !important;
  }
  html body.calendar-page .calendar-hero-stats span {
    font-size:clamp(9px,2.5vw,11px) !important;
    margin-top:5px !important;
    line-height:1.3 !important;
  }
  html body.calendar-page .calendar-workspace-section {
    padding:22px 0 65px !important;
  }
  html body.calendar-page .calendar-journey-bar {
    gap:14px !important;
  }
  html body.calendar-page .professional-calendar-layout {
    gap:14px !important;
  }
  html body.calendar-page .calendar-grid-scroll {
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  html body:is([data-page="support"],.arabids-support-page) .as-page-modern
    .as-contact-grid-modern > .as-contact-card {
    min-height:215px !important;
    height:auto !important;
  }
  html body:is([data-page="support"],.arabids-support-page) .as-page-modern
    .as-contact-grid-modern > .as-contact-phone-merged {
    background-position:center,70% center !important;
  }
}