/*
 * BeaMiiLocal — Home section chrome
 * Version: 1.0.0
 * Visual contract for the six primary home sections.
 * - Consistent icon + title + short supporting copy.
 * - Soft section dividers instead of heavy boxes.
 * - Lightweight CSS-only ambient background (no image request / no PWA cost).
 */

.app--home .beamii-home{
  --beamii-home-surface:#f3f8fb;
  --beamii-home-ink:#17324d;
  --beamii-home-muted:#6a7e92;
  position:relative;
  isolation:isolate;
  background-image:
    radial-gradient(circle at 8% 5%, rgba(76,184,220,.10) 0, rgba(76,184,220,0) 24%),
    radial-gradient(circle at 94% 29%, rgba(111,93,197,.075) 0, rgba(111,93,197,0) 22%),
    radial-gradient(circle at 12% 68%, rgba(42,157,112,.07) 0, rgba(42,157,112,0) 22%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(237,246,251,.32));
  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* Each section owns an accent. The values are intentionally quiet so the
   content cards remain the strongest visual element. */
.app--home [data-beamii-home-section-id="posts"]{
  --beamii-home-section-accent:#1f83b5;
  --beamii-home-section-accent-2:#48b8dc;
  --beamii-home-section-soft:#e7f6fb;
  --beamii-home-section-border:rgba(31,131,181,.18);
  --beamii-home-section-shadow:rgba(31,131,181,.12);
}

.app--home [data-beamii-home-section-id="nearest"]{
  --beamii-home-section-accent:#2b78c5;
  --beamii-home-section-accent-2:#54a9df;
  --beamii-home-section-soft:#eaf4fc;
  --beamii-home-section-border:rgba(43,120,197,.18);
  --beamii-home-section-shadow:rgba(43,120,197,.12);
}

.app--home [data-beamii-home-section-id="associations"]{
  --beamii-home-section-accent:#7356b8;
  --beamii-home-section-accent-2:#9a7dde;
  --beamii-home-section-soft:#f1edfb;
  --beamii-home-section-border:rgba(115,86,184,.18);
  --beamii-home-section-shadow:rgba(115,86,184,.12);
}

.app--home [data-beamii-home-section-id="events"]{
  --beamii-home-section-accent:#c77724;
  --beamii-home-section-accent-2:#e5a64c;
  --beamii-home-section-soft:#fff3df;
  --beamii-home-section-border:rgba(199,119,36,.18);
  --beamii-home-section-shadow:rgba(199,119,36,.12);
}

.app--home [data-beamii-home-section-id="routes"]{
  --beamii-home-section-accent:#238664;
  --beamii-home-section-accent-2:#54ae86;
  --beamii-home-section-soft:#e9f7f1;
  --beamii-home-section-border:rgba(35,134,100,.18);
  --beamii-home-section-shadow:rgba(35,134,100,.12);
}

.app--home [data-beamii-home-section-id="smagen"]{
  --beamii-home-section-accent:#6d8f35;
  --beamii-home-section-accent-2:#a1b95a;
  --beamii-home-section-soft:#f2f7e7;
  --beamii-home-section-border:rgba(109,143,53,.18);
  --beamii-home-section-shadow:rgba(109,143,53,.12);
}

.app--home .beamii-home > section[data-beamii-home-section]{
  position:relative;
  min-width:0;
}

/* Lightweight <hr>-like divider between whichever sections are currently
   adjacent. The divider lives inside the section, so it follows drag/reorder
   operations and does not collide with section-specific pseudo-elements. */
.app--home .beamii-home > section[data-beamii-home-section]{
  margin-top:0 !important;
}

.app--home .beamii-home > section[data-beamii-home-section] ~ section[data-beamii-home-section]{
  margin-top:10px !important;
}

.app--home .beamii-home__section-divider{
  position:relative;
  display:none;
  width:100%;
  height:1px;
  margin:0 0 26px;
  border:0;
  background:linear-gradient(90deg, rgba(23,50,77,.04), rgba(23,50,77,.17) 16%, rgba(23,50,77,.10) 78%, rgba(23,50,77,0));
  pointer-events:none;
}

.app--home .beamii-home > section[data-beamii-home-section] ~ section[data-beamii-home-section] > .beamii-home__section-divider{
  display:block;
}

.app--home .beamii-home__section-divider::after{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:46px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--beamii-home-section-accent, #1f83b5), var(--beamii-home-section-accent-2, #48b8dc));
  box-shadow:0 2px 9px var(--beamii-home-section-shadow, rgba(31,131,181,.12));
}

/* Shared heading language. Posts keeps its existing selector/hooks while the
   other sections use sectionhead--with-icon. */
.app--home .beamii-home__sectionhead--with-icon,
.app--home .beamii-home__posts-heading{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
  margin:0 0 11px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.app--home .beamii-home__sectionhead-copy,
.app--home .beamii-home__posts-heading-copy{
  flex:1 1 auto;
  min-width:0;
}

.app--home .beamii-home__sectionhead-icon,
.app--home .beamii-home__posts-heading-icon{
  position:relative;
  display:grid !important;
  place-items:center !important;
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
  margin:0 !important;
  overflow:hidden;
  border:1px solid var(--beamii-home-section-border, rgba(31,131,181,.18)) !important;
  border-radius:14px !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0 18%, transparent 19%),
    linear-gradient(145deg, #fff, var(--beamii-home-section-soft, #e7f6fb)) !important;
  color:var(--beamii-home-section-accent, #1f83b5) !important;
  box-shadow:0 8px 20px var(--beamii-home-section-shadow, rgba(31,131,181,.12)) !important;
}

.app--home .beamii-home__sectionhead-icon::after,
.app--home .beamii-home__posts-heading-icon::after{
  content:"";
  position:absolute;
  right:-9px;
  bottom:-9px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--beamii-home-section-accent, #1f83b5);
  opacity:.08;
}

.app--home .beamii-home__sectionhead-icon i,
.app--home .beamii-home__posts-heading-icon i{
  position:relative;
  z-index:1;
  display:block !important;
  color:inherit !important;
  font-size:15px !important;
  line-height:1 !important;
}

.app--home .beamii-home__sectionhead--with-icon .beamii-home__sectiontitle,
.app--home .beamii-home__posts-heading .beamii-home__sectiontitle{
  margin:0 !important;
  color:var(--beamii-home-ink) !important;
  font-size:clamp(1.16rem, 4.2vw, 1.32rem) !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.026em !important;
}

.app--home .beamii-home__sectionhead--with-icon .beamii-home__sectionsub,
.app--home .beamii-home__posts-heading .beamii-home__sectionsub{
  display:block !important;
  max-width:34rem;
  margin:4px 0 0 !important;
  color:var(--beamii-home-muted) !important;
  font-size:.76rem !important;
  line-height:1.38 !important;
  font-weight:520 !important;
}

/* Give the content a little breathing room without introducing another card
   around the entire section. */
.app--home .beamii-home__sectionshell{
  position:relative;
  z-index:1;
}

/* The section accent should remain subtle while customizing/reordering. */
.app--home .beamii-home.is-customizing .beamii-home__section-divider{
  margin-bottom:30px;
}

@media (max-width:390px){
  .app--home .beamii-home > section[data-beamii-home-section] ~ section[data-beamii-home-section]{
    margin-top:7px !important;
  }

  .app--home .beamii-home__section-divider{
    margin-bottom:23px;
  }

  .app--home .beamii-home__sectionhead--with-icon,
  .app--home .beamii-home__posts-heading{
    gap:10px !important;
    margin-bottom:10px !important;
  }

  .app--home .beamii-home__sectionhead-icon,
  .app--home .beamii-home__posts-heading-icon{
    flex-basis:37px !important;
    width:37px !important;
    height:37px !important;
    border-radius:13px !important;
  }

  .app--home .beamii-home__sectionhead--with-icon .beamii-home__sectiontitle,
  .app--home .beamii-home__posts-heading .beamii-home__sectiontitle{
    font-size:1.18rem !important;
  }

  .app--home .beamii-home__sectionhead--with-icon .beamii-home__sectionsub,
  .app--home .beamii-home__posts-heading .beamii-home__sectionsub{
    font-size:.73rem !important;
  }
}

@media (min-width:760px){
  .app--home .beamii-home > section[data-beamii-home-section] ~ section[data-beamii-home-section]{
    margin-top:14px !important;
  }

  .app--home .beamii-home__section-divider{
    margin-bottom:30px;
  }

  .app--home .beamii-home__sectionhead-icon,
  .app--home .beamii-home__posts-heading-icon{
    flex-basis:42px !important;
    width:42px !important;
    height:42px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .app--home .beamii-home__sectionhead-icon,
  .app--home .beamii-home__posts-heading-icon{
    transition:none !important;
  }
}