/* ==========================================================================
   Archijeunes FSE – Home Layout
   Layout spécifique de la page d'accueil
   ========================================================================== */

/* --------------------------------------------------------------------------
   Structure générale home
   -------------------------------------------------------------------------- */

.home {
  overflow: hidden;
  --footer-h: 135px;
}

.home #main {
  height: 100vh;
}

.home #main .wp-block-post-content {
  margin: 0;
}

.home #main .layout-home {
  height: calc(100vh - var(--footer-h));
}

.home #main .layout-home > .wp-block-column:last-child {
  position: relative;
  z-index: 100;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Hero titre home (mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .home #main h1.wp-block-heading.has-4-xl-font-size {
    font-size: var(--wp--preset--font-size--3-xl) !important;
  }
}

/* --------------------------------------------------------------------------
   Hero image home (desktop)
   -------------------------------------------------------------------------- */

@media (min-width: 1201px) {
  .home .home-hero-image {
    flex: 1;
    min-height: 0;
  }

  .home .home-hero-image .wp-block-image,
  .home .home-hero-image .wp-block-image img {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    max-height: calc(100vh - (var(--footer-h)/2));
    padding-bottom: 0;
    transform: translateY(-5vh);
  }

  .home .home-hero-image .wp-block-image img {
    object-fit: contain;
  }
}

/* --------------------------------------------------------------------------
   Layout colonnes home
   -------------------------------------------------------------------------- */

.layout-home {
  align-items: flex-start;
}

/* Desktop - Sidebar fixe */
@media (min-width: 1221px) {
  .layout-home > .wp-block-column:first-child {
    position: fixed;
    top: 168px;
    left: 0;
    flex-basis: 40% !important;
    max-width: 40% !important;
    height: calc(100vh - 168px - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: var(--wp--preset--spacing--large);
    padding-top: var(--wp--preset--spacing--medium);
    padding-bottom: var(--wp--preset--spacing--large);
  }

  .layout-home > .wp-block-column:last-child {
    flex-basis: 60% !important;
    max-width: 60% !important;
    margin-left: 37%;
  }
}

/* Tablet - Sidebar fixe aussi */
@media (min-width: 1201px) and (max-width: 1220px) {
  .layout-home > .wp-block-column:first-child {
    position: fixed;
    top: 148px;
    left: 0;
    flex-basis: 35% !important;
    max-width: 35% !important;
    height: calc(100vh - 148px - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: var(--wp--preset--spacing--large);
    padding-top: var(--wp--preset--spacing--medium);
    padding-bottom: var(--wp--preset--spacing--large);
  }

  .layout-home > .wp-block-column:last-child {
    flex-basis: 100% !important;
    max-width: 100% !important;
    margin-left: 35%;
  }
  .home .home-hero-image .wp-block-image,
  .home .home-hero-image .wp-block-image img {
    transform: translateY(-15vh);
  }
}

/* --------------------------------------------------------------------------
   Hero images (tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 1201px) and (min-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    z-index: 200;
    position: relative;
  }
  .hero-mobile {
    height: 75vh !important;
    min-height: 75svh !important;
    transform: translateY(-13vh);
  }
}
/* --------------------------------------------------------------------------
   Hero images (desktop vs mobile)
   -------------------------------------------------------------------------- */

.home-hero-image .img-desktop {
  display: block;
}

.home-hero-image .img-mobile {
  display: none;
}

@media (max-width: 1200px) {
  .home-hero-image .img-desktop {
    display: none;
  }

  .home-hero-image .img-mobile {
    display: block;
  }

  /* Mobile hero container */
  .hero-mobile {
    height: 55vh;
    min-height: 55svh; /* iOS viewport stable */
    overflow: hidden;
  }

  .hero-mobile .wp-block-image,
  .hero-mobile img {
    width: 100%;
    height: 100%;
  }

  .hero-mobile img {
    object-fit: contain;
    padding-inline: 1rem;
  }
}

/* --------------------------------------------------------------------------
   footer homepage
   -------------------------------------------------------------------------- */
.home footer > .has-secondary-background-color {
  background-color: transparent !important;
}