/* ==========================================================================
   ASIBONGE LEGACY GROUP - 04 SECTION PATTERNS
   Each block here is a reusable pattern. In Elementor each becomes a saved
   Template under Templates > Saved Templates, dropped into any page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PATTERN A - HERO
   Full-bleed image, graphite scrim weighted to the left, content on 7 cols.
   Elementor: Container (full width, min-height 82vh, background image +
   background overlay) > inner Container (boxed, max-width 720px).
   -------------------------------------------------------------------------- */
.alg-hero {
  position: relative;
  min-height: min(62vh, 580px);
  display: flex;
  align-items: flex-end;
  background: var(--alg-dark);
  overflow: hidden;
}
.alg-hero__bg { position: absolute; inset: 0; }
.alg-hero__bg img,
.alg-hero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.alg-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,22,26,.94) 0%, rgba(20,22,26,.82) 38%, rgba(20,22,26,.28) 72%, rgba(20,22,26,.15) 100%),
    linear-gradient(0deg,  rgba(20,22,26,.72) 0%, rgba(20,22,26,0) 55%);
}
.alg-hero .alg-container { position: relative; z-index: 2; padding-top: 92px; padding-bottom: 68px; }
.alg-hero__inner { max-width: 680px; }
.alg-hero h1 { color: #fff; margin-bottom: 26px; }
.alg-hero p {
  color: rgba(255,255,255,.80);
  font-size: var(--alg-body-lg);
  line-height: 1.62;
  max-width: 560px;
  margin-bottom: 32px;
}
.alg-hero .alg-eyebrow { color: #fff; }
.alg-hero .alg-eyebrow::before { border-bottom-color: var(--alg-primary-hi); }

/* Hero footer strip - three facts, no invented numbers. */
.alg-hero__strip {
  position: relative;
  z-index: 2;
  background: var(--alg-primary);
  color: #fff;
}
.alg-hero__strip .alg-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.alg-hero__strip p {
  margin: 0;
  font-family: var(--alg-font-display);
  font-size: var(--alg-small);
  font-weight: 600;
  letter-spacing: -.005em;
}
.alg-hero__strip .alg-btn { height: var(--alg-btn-h); background: #fff; color: var(--alg-primary); }

/* On a phone the strip stacks, so a display-weight line plus a full-scale
   button turns a one-line band into a block. Everything steps down. */
@media (max-width: 640px) {
  .alg-hero__strip .alg-container {
    gap: 14px 20px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .alg-hero__strip p {
    font-size: var(--alg-micro);
    font-weight: 600;
    line-height: 1.5;
    max-width: 30ch;
  }
  .alg-hero__strip .alg-btn { height: 34px; padding: 0 14px; }
}
.alg-hero__strip .alg-btn:hover { background: var(--alg-ink); color: #fff; }

@media (max-width: 640px) {

  /* Hero actions stay side by side on one straight line, splitting the
     available width evenly rather than stacking. */
  .alg-hero .alg-btn-row { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .alg-hero .alg-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}

@media (max-width: 360px) {
  .alg-hero .alg-btn { letter-spacing: .04em; padding: 0 6px; }
}

/* --------------------------------------------------------------------------
   PATTERN B - INTRO SPLIT (image + prose)
   -------------------------------------------------------------------------- */
.alg-intro__media { position: relative; }
.alg-intro__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--alg-ink);
  color: #fff;
  padding: 22px 26px;
  max-width: 260px;
}
.alg-intro__badge span {
  display: block;
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--alg-primary-hi);
  margin-bottom: 8px;
}
.alg-intro__badge strong {
  font-family: var(--alg-font-display);
  font-size: var(--alg-h4);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   PATTERN C - DIVISION INDEX
   Image + name + one line. Separated by hairlines, not cards.
   Elementor: Loop Grid over a "Division" CPT, or 8 Containers.
   -------------------------------------------------------------------------- */
.alg-division {
  display: block;
  background: #fff;
  border: 1px solid var(--alg-border);
  transition: border-color .22s var(--alg-ease);
}
.alg-division:hover { border-color: var(--alg-ink); }
.alg-division__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--alg-dark-2); }
.alg-division__media img,
.alg-division__media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--alg-ease);
}
.alg-division:hover .alg-division__media img,
.alg-division:hover .alg-division__media svg { transform: scale(1.04); }
.alg-division__body { padding: 24px 24px 26px; }
.alg-division__name {
  font-family: var(--alg-font-display);
  font-size: var(--alg-card);
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--alg-ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.alg-division__desc { font-size: var(--alg-small); line-height: 1.6; color: var(--alg-text-muted); margin: 0; }
.alg-division__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--alg-primary);
  white-space: nowrap;
}
.alg-division__more svg { width: 11px; height: 11px; flex: none; fill: currentColor; transition: transform .22s var(--alg-ease); }
.alg-division:hover .alg-division__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   PATTERN D - FULL-BLEED IMAGE BAND (dark, text over image)
   -------------------------------------------------------------------------- */
.alg-band { position: relative; overflow: hidden; background: var(--alg-dark); }
.alg-band__bg { position: absolute; inset: 0; }
.alg-band__bg img,
.alg-band__bg svg { width: 100%; height: 100%; object-fit: cover; }
.alg-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,22,26,.95) 0%, rgba(20,22,26,.86) 45%, rgba(20,22,26,.55) 100%);
}
.alg-band .alg-container { position: relative; z-index: 2; }
.alg-band__inner { max-width: 640px; }

/* --------------------------------------------------------------------------
   PATTERN E - OPERATING MODEL (two lists, asymmetric)
   -------------------------------------------------------------------------- */
.alg-model__lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--alg-gap-lg);
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--alg-border-dark);
}
.alg-model__title {
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--alg-primary-hi);
  margin: 0 0 22px;
}
@media (max-width: 768px) { .alg-model__lists { grid-template-columns: 1fr; gap: 40px; } }

/* --------------------------------------------------------------------------
   PATTERN F - PILLAR BLOCKS (sustainability, values)
   Hairline-separated, no cards, no icons.
   -------------------------------------------------------------------------- */
.alg-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--alg-border); }
.alg-pillar {
  padding: 34px 34px 34px 0;
  border-bottom: 1px solid var(--alg-border);
}
.alg-pillar:nth-child(odd) { border-right: 1px solid var(--alg-border); }
.alg-pillar:nth-child(even) { padding-left: 34px; }
.alg-pillar h3 { margin-bottom: 10px; font-size: var(--alg-h3); }
.alg-pillar p { font-size: var(--alg-small); line-height: 1.65; color: var(--alg-text-muted); margin: 0; }
@media (max-width: 640px) {
  .alg-pillars { grid-template-columns: 1fr; }
  .alg-pillar { padding: 26px 0; }
  .alg-pillar:nth-child(odd) { border-right: 0; }
  .alg-pillar:nth-child(even) { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   PATTERN F2: GATEWAY PANELS
   Two image panels that route to a full section of the site. Used where a
   homepage would otherwise carry a whole section's worth of content.
   Elementor: Container (flex row) with two child Containers, each a
   background image + overlay + Heading + Text + Button.
   -------------------------------------------------------------------------- */
.alg-gateway { display: grid; grid-template-columns: 1fr 1fr; gap: var(--alg-gap); }
.alg-gateway__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  overflow: hidden;
  background: var(--alg-dark);
}
.alg-gateway__bg { position: absolute; inset: 0; }
.alg-gateway__bg img,
.alg-gateway__bg svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--alg-ease);
}
.alg-gateway__panel:hover .alg-gateway__bg img,
.alg-gateway__panel:hover .alg-gateway__bg svg { transform: scale(1.04); }
.alg-gateway__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,22,26,.94) 8%, rgba(20,22,26,.55) 58%, rgba(20,22,26,.30) 100%);
}
.alg-gateway__body { position: relative; z-index: 2; padding: 38px 38px 36px; }
.alg-gateway__body h3 { color: #fff; font-size: var(--alg-h3); margin-bottom: 12px; }
.alg-gateway__body p { color: rgba(255,255,255,.76); font-size: var(--alg-small); line-height: 1.65; margin: 0 0 22px; max-width: 420px; }
.alg-gateway .alg-eyebrow { color: var(--alg-primary-hi); }
.alg-gateway .alg-eyebrow::before { border-bottom-color: var(--alg-primary-hi); }
.alg-gateway__panel .alg-link { color: #fff; border-bottom-color: var(--alg-primary-hi); white-space: nowrap; }
.alg-gateway__panel:hover .alg-link { color: var(--alg-primary-hi); }

@media (max-width: 768px) {
  .alg-gateway { grid-template-columns: 1fr; }
  .alg-gateway__panel { min-height: 300px; }
  .alg-gateway__body { padding: 28px 26px 26px; }
}

/* --------------------------------------------------------------------------
   PATTERN G - NEWS LOOP
   Elementor: Loop Grid widget + a Loop Item template.
   -------------------------------------------------------------------------- */
.alg-post { display: flex; flex-direction: column; height: 100%; }
.alg-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--alg-dark-2); margin-bottom: 22px; }
.alg-post__media img,
.alg-post__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--alg-ease); }
.alg-post:hover .alg-post__media img,
.alg-post:hover .alg-post__media svg { transform: scale(1.04); }
.alg-post__meta {
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--alg-primary);
  margin-bottom: 12px;
  display: flex; gap: 12px; align-items: center;
}
.alg-post__meta span:last-child { color: var(--alg-text-muted); }
.alg-post__title {
  font-family: var(--alg-font-display);
  font-size: var(--alg-post);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.014em;
  color: var(--alg-ink);
  margin: 0 0 10px;
}
.alg-post:hover .alg-post__title { color: var(--alg-primary); }
.alg-post__excerpt { font-size: var(--alg-small); line-height: 1.65; color: var(--alg-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   PATTERN H - CLOSING CTA BAND
   -------------------------------------------------------------------------- */
.alg-cta { position: relative; overflow: hidden; background: var(--alg-ink); }
.alg-cta__bg { position: absolute; inset: 0; opacity: .30; }
.alg-cta__bg img, .alg-cta__bg svg { width: 100%; height: 100%; object-fit: cover; }
.alg-cta .alg-container {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 40px;
}
.alg-cta__text { max-width: 620px; }
.alg-cta h2 { color: #fff; margin-bottom: 14px; }
.alg-cta p { color: var(--alg-silver); margin: 0; }
.alg-cta__corner { left: 50%; top: -140px; opacity: .07; width: 420px; }

/* --------------------------------------------------------------------------
   SCROLL REVEAL - one effect only, respects reduced motion.
   In Elementor this is replaced by the built-in Entrance Animation
   (Advanced > Motion Effects > Entrance Animation: Fade In Up).
   -------------------------------------------------------------------------- */
.alg-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--alg-ease), transform .6s var(--alg-ease);
}
.alg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .alg-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   PATTERN I: PAGE HERO (interior pages)
   Shorter than the homepage hero. Breadcrumb, eyebrow, H1, one support line.
   Elementor: Container, min-height 360px, background image + overlay.
   -------------------------------------------------------------------------- */
.alg-pagehero {
  position: relative;
  overflow: hidden;
  background: var(--alg-dark);
  display: flex;
  align-items: flex-end;
  min-height: 400px;
}
.alg-pagehero__bg { position: absolute; inset: 0; }
.alg-pagehero__bg img,
.alg-pagehero__bg svg { width: 100%; height: 100%; object-fit: cover; }
.alg-pagehero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,22,26,.94) 0%, rgba(20,22,26,.80) 45%, rgba(20,22,26,.34) 100%),
    linear-gradient(0deg,  rgba(20,22,26,.70) 0%, rgba(20,22,26,0) 60%);
}
.alg-pagehero .alg-container {
  position: relative; z-index: 2;
  padding-top: 76px; padding-bottom: 56px;
}
.alg-pagehero__inner { max-width: 720px; }
.alg-pagehero h1 { color: #fff; margin-bottom: 18px; }
.alg-pagehero p {
  color: rgba(255,255,255,.80);
  font-size: var(--alg-body-lg);
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}
.alg-pagehero .alg-eyebrow { color: var(--alg-primary-hi); }
.alg-pagehero .alg-eyebrow::before { border-bottom-color: var(--alg-primary-hi); }

@media (max-width: 640px) {
  .alg-pagehero { min-height: 300px; }
  .alg-pagehero .alg-container { padding-top: 52px; padding-bottom: 40px; }
}

/* Breadcrumb */
.alg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
.alg-crumbs a { color: rgba(255,255,255,.72); transition: color .16s var(--alg-ease); }
.alg-crumbs a:hover { color: var(--alg-primary-hi); }
.alg-crumbs span[aria-hidden] { color: rgba(255,255,255,.34); }

/* --------------------------------------------------------------------------
   PATTERN J: TWO-COLUMN OFFERING LISTS
   -------------------------------------------------------------------------- */
.alg-cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--alg-gap-lg);
}
@media (max-width: 640px) { .alg-cols2 { grid-template-columns: 1fr; } }

/* At-a-glance panel beside the overview text */
.alg-facts {
  background: var(--alg-bg-alt);
  border: 1px solid var(--alg-border);
  padding: 32px 34px;
}
.alg-facts dl { margin: 0; }
.alg-facts dt {
  font-family: var(--alg-font-label);
  font-size: var(--alg-eyebrow);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--alg-primary);
  margin-bottom: 7px;
}
.alg-facts dd {
  margin: 0 0 22px;
  font-size: var(--alg-small);
  line-height: 1.6;
  color: var(--alg-text);
}
.alg-facts dd:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   PATTERN A2: LIGHT HERO
   For a bright image where a dark scrim would read as a black block pasted
   over a white photograph. Text goes to ink, the scrim goes to white, and the
   buttons switch to the light pair.
   Elementor: same Container, background overlay set to white with a gradient.
   -------------------------------------------------------------------------- */
.alg-hero--light {
  background: linear-gradient(180deg,
    #F3EAE3 0%, #F3E8E2 8%, #EEE4DB 16%, #E6D9D0 24%,
    #E3D5CC 32%, #E0D3CA 40%, #D9CBC0 48%, #D4C6BB 56%,
    #D0C0B3 64%, #CCBEB1 72%, #D9CCC3 77%, #E4D7CE 80%,
    #E3D5CC 86%, #DBCDC4 92%, #CEBEB1 100%);
}

.alg-hero--light .alg-btn--outline {
  border-color: rgba(26, 28, 32, .28);
  background: rgba(255, 255, 255, .30);
}
.alg-hero--light .alg-btn--outline:hover {
  border-color: var(--alg-ink);
  background: rgba(255, 255, 255, .55);
}

@media (min-width: 901px) {
  /* Contained, not covered. The subject keeps its full height at any viewport
     width, and the gradient above continues the image's own background field
     into the space left over. */
  .alg-hero--light { min-height: min(66vh, 620px); }
  .alg-hero--light .alg-hero__bg img,
  .alg-hero--light .alg-hero__bg svg {
    object-fit: contain;
    object-position: right bottom;
  }
}

/* No overlay. The image is bright enough on the left for ink text to sit
   directly on it, so the photograph is shown clean. */
.alg-hero--light .alg-hero__scrim { background: none; }
.alg-hero--light h1 { color: var(--alg-ink); }
.alg-hero--light p  { color: var(--alg-text); }

/* Below 900px the hero overlays again, with the artwork pushed right so the
   image's own empty field sits behind the text. The 30% the image vacates on
   the left is filled by the gradient on .alg-hero--light, which was sampled
   from the image's own left edge, so the join is invisible. */
@media (max-width: 900px) {
  .alg-hero {
    display: flex;
    align-items: center;
    min-height: min(58vh, 440px);
  }
  .alg-hero__bg { position: absolute; inset: 0; }
  .alg-hero__bg img,
  .alg-hero__bg svg {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: right center;
    transform: translateX(30%);
    /* Because the image is covered and anchored right, the edge exposed on the
       left is a mid-image column, not the file's own left edge, so it does not
       match the gradient behind it the way it does on desktop. Fading the last
       90px of the image into that gradient removes the join. */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 90px);
            mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 90px);
  }
  .alg-hero__scrim { display: none; }

  .alg-hero .alg-container {
    padding-top: var(--alg-section-sm);
    padding-bottom: var(--alg-section-sm);
  }

  /* Text sits left and steps down a size: at overlay scale the desktop
     headline crowds the frame. */
  .alg-hero__inner { max-width: 68%; }
  .alg-hero h1 {
    font-size: clamp(1.5rem, 1.02rem + 2.1vw, 2rem);   /* 24 -> 32 */
    margin-bottom: 16px;
  }
  .alg-hero p {
    font-size: var(--alg-small);
    line-height: 1.55;
    margin-bottom: 22px;
  }
}

@media (max-width: 560px) {
  .alg-hero { min-height: min(54vh, 380px); }
  .alg-hero__inner { max-width: 78%; }
}

@media (max-width: 400px) {
  /* On the narrowest phones the two buttons no longer fit on one line inside
     a narrowed column, so the column takes the full width there. */
  .alg-hero__inner { max-width: 100%; }
  .alg-hero__bg img,
  .alg-hero__bg svg { transform: translateX(42%); }
}

/* --------------------------------------------------------------------------
   STACKED-LAYOUT ADJUSTMENTS
   When the intro split stacks, a 4:5 portrait image becomes a very tall block
   on a phone, and the badge overlaying it eats most of the frame. Below 900px
   the image crops wider and the badge sits under it as a full-width bar.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .alg-intro__media .alg-media--tall { aspect-ratio: 3 / 2; }
  .alg-intro__badge {
    position: static;
    max-width: none;
    padding: 20px 24px;
  }
}

/* --------------------------------------------------------------------------
   PHONE HERO: dedicated portrait artwork
   Below 640px the <picture> swaps to 01-home-hero-mobile.jpg, which is shot
   2:3 with the blocks massed along the bottom and clear field above. The
   section is sized to the screen so the whole composition is visible without
   scrolling, and the image is anchored to the bottom so the blocks and the
   floor line are never the part that gets cropped.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .alg-hero {
    /* The section takes the artwork's own 2:3 shape, so the file is shown
       whole at every phone width: nothing cropped, nothing letterboxed. */
    aspect-ratio: 2 / 3;
    min-height: 0;
    align-items: flex-start;
  }
  .alg-hero__bg img,
  .alg-hero__bg svg {
    object-fit: cover;
    object-position: center bottom;
    /* Both are for the landscape artwork only: the portrait file needs no
       shifting, and with no gap beside it there is no join to fade out. */
    transform: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .alg-hero .alg-container {
    padding-top: 34px;
    padding-bottom: var(--alg-section-sm);
  }
  .alg-hero__inner { max-width: 100%; }
}