/* homepage-menus.css — ported from sass/blocks/menus-overview.scss.
 * Legacy desktop variant (.block-views-blockmenus-block-1). Tokens swapped
 * where the hex matched the audited palette exactly. */

.block-views-blockmenus-block-1 {
  display: block;
  margin: 40px 0;
}
.block-views-blockmenus-block-1 .view-content {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 35px 0 35px 35px;
}
@media only screen and (min-width: 601px) {
  .block-views-blockmenus-block-1 .view-content { width: 85%; }
}
@media only screen and (min-width: 993px) {
  .block-views-blockmenus-block-1 .view-content { width: 80%; }
}
@media only screen and (min-width: 1201px) {
  .block-views-blockmenus-block-1 .view-content { width: 70%; }
}
.block-views-blockmenus-block-1 .view-content:before,
.block-views-blockmenus-block-1 .view-content:after {
  display: table;
  content: " ";
}
.block-views-blockmenus-block-1 .view-content:after {
  clear: both;
}
.block-views-blockmenus-block-1 .view-content:after {
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: var(--color-blue-100);
  content: "";
}
.block-views-blockmenus-block-1 .view-content .views-row {
  max-width: 30%;
}
.block-views-blockmenus-block-1 .view-content header {
  max-width: 40%;
  margin-right: auto;
}
.block-views-blockmenus-block-1 .view-content .views-row {
  position: relative;
  width: 260px;
  max-height: 160px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.block-views-blockmenus-block-1 .view-content .views-row:nth-of-type(1) {
  right: -40px;
}
.block-views-blockmenus-block-1 .view-content .views-row:nth-of-type(2) {
  right: -80px;
}
.block-views-blockmenus-block-1 .view-content .views-row:hover .views-field-field-hover-text {
  opacity: 1;
  transition: 0.2s linear;
}
.block-views-blockmenus-block-1 .view-content .views-row .views-field-field-image,
.block-views-blockmenus-block-1 .view-content .views-row .field-content {
  height: 100%;
}
.block-views-blockmenus-block-1 .view-content .views-field-field-hover-text {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  background: rgba(0, 159, 237, 0.9);
  text-align: center;
  opacity: 0;
  transition: 0.2s linear;
}
.block-views-blockmenus-block-1 .view-content .views-field-field-hover-text .field-content,
.block-views-blockmenus-block-1 .view-content .views-field-field-hover-text .field-content * {
  color: var(--color-white);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
.block-views-blockmenus-block-1 .view-content .views-field-field-hover-text .field-content:after {
  word-wrap: normal;
  display: block;
  margin-top: 10px;
  content: "\e5c8";
  color: var(--color-white);
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 1;
  font-family: "Material Icons";
  letter-spacing: normal;
  direction: ltr;
  text-transform: none;
  white-space: nowrap;
  transition: 0.3s linear;
}
.block-views-blockmenus-block-1 .view-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-views-blockmenus-block-1 .view-content .views-field-view-node,
.block-views-blockmenus-block-1 .view-content .views-field-view-node a {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.block-views-blockmenus-block-1 header .field--name-block-description {
  margin-bottom: 10px;
}
.block-views-blockmenus-block-1 header .field--name-block-description h3 {
  margin-bottom: 0;
  color: var(--color-gray-900);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}
.block-views-blockmenus-block-1 header .field--name-body {
  margin-bottom: 60px;
}
.block-views-blockmenus-block-1 header .field--name-body a {
  font-weight: 500;
}
.block-views-blockmenus-block-1 header .field--name-body p {
  font-weight: 400;
}
.block-views-blockmenus-block-1 header .field--name-body p:last-child {
  margin-bottom: 0;
}

/* Block-2 is the legacy mobile-only Slick variant. The mobile carousel now
 * re-uses block-1's views-row siblings (wrapped into a strip by JS), so
 * block-2 stays hidden site-wide. */
.block-views-blockmenus-block-2 {
  display: none;
}

/* Default: the strip is layout-invisible so block-1's existing desktop
 * flex layout keeps positioning each .views-row as a flex child of
 * .view-content. The strip only "exists" visually on mobile. */
.block-views-blockmenus-block-1 .view-content .views-row-strip {
  display: contents;
}

@media only screen and (max-width: 600px) {
  /* Block-1's desktop grid doesn't fit mobile. Switch to block layout, give
   * the blue container 70px bottom padding so the carousel can overlap it. */
  .block-views-blockmenus-block-1 .view-content {
    display: block;
    padding: 35px 1rem 70px;
  }
  /* Blue background pseudo defaults to 80% height — extend to 100% on
   * mobile so the carousel's top edge straddles the blue/white boundary. */
  .block-views-blockmenus-block-1 .view-content:after {
    height: 100%;
  }
  .block-views-blockmenus-block-1 .view-content header {
    max-width: 100%;
    margin-right: 0;
  }
  /* The strip becomes the horizontal scroll-snap carousel on mobile.
   * Negative top + bottom margins straddle the blue/white boundary so the
   * images overlap block-1's blue area and pull up against the next block. */
  .block-views-blockmenus-block-1 .view-content .views-row-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1rem;
    margin-top: -25px;
    margin-bottom: -95px;
    position: relative;
    z-index: 2;
    -webkit-overflow-scrolling: touch;
  }
  .block-views-blockmenus-block-1 .view-content .views-row-strip .views-row {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    /* Keep position: relative so the absolutely-positioned
     * .views-field-field-hover-text inside each row anchors to ITS row,
     * not to the strip — otherwise every hover overlay piles on top of
     * the first image. */
    position: relative;
    right: auto;
    scroll-snap-align: start;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  }
  .block-views-blockmenus-block-1 .view-content .views-row-strip .views-row img {
    display: block;
    height: 240px;
    width: auto;
    max-width: none;
    object-fit: initial;
  }
}