@import url("../components/c-button.selectors.css");
@import url("../components/c-card.selectors.css");
@import url("../tools/x-layout.css");

@import url("./o-section.selectors.css");





/* Block */

:--o-section {
  /* Estimates from varying spacing in design specs:
    - TACC Site Mockups
    - CMS-Common-Components
  */
  --margin-block: var(--global-space--section-gap); /* 60px */
  --padding-top: 50px;
  --padding-bottom: 50px;
}

/* Basic blocks use margin, for intuitive usage */
:--o-section:not(:--o-section--style) {
  margin-block: var(--margin-block);
}

/* Modified blocks use padding, to support backgrounds */
:--o-section--style {
  padding-block: var(--padding-top) var(--padding-bottom);
}

/* To distinguish nested sections */
:--o-section :--o-section {
  padding: var(--padding-top);
  margin-inline: calc(-1 * var(--padding-top));
}





/* Modifers */



/* Modifers: Banner */

.o-section--banner { overflow: hidden; }
.o-section--banner [class*="o-section--layout"] { gap: 0; }
.o-section--banner .container { padding-inline: 0; }
.o-section--banner:--o-section { padding-block: 0; }



/* Modifers: Intro */
/* FP-1463: Extract to new layout object */

/* To hide empty an column of an intro */
/* HACK: This assumes an intro has columns */
/* FAQ: Only Frontera's temporary homepage uses `.o-section--intro` */
.o-section--intro > :empty:not(img),
.o-section--intro .u-empty {
  display: none;
}



/* Modifers: Style */

/* Modifers: Style: Options */

:--o-section--light {
  --color--text: var(--global-color-primary--xx-dark);
  --color--bkgd: var(--global-color-primary--xx-light);
  --color--line: var(--global-color-primary--normal);
}
:--o-section--accent {
  --color--text: var(--global-color-primary--xx-dark);
  --color--bkgd: var(--global-color-accent--xxx-light);
  --color--line: var(--global-color-accent--light);

  & h2,
  & .h2 {
    color: currentColor;
  }
}
:--o-section--muted {
  --color--text: var(--global-color-primary--xx-dark);
  --color--bkgd: var(--global-color-primary--x-light);
  --color--line: var(--global-color-primary--dark);
}
:--o-section--dark {
  --color--text: var(--global-color-primary--x-light);
  --color--bkgd: var(--global-color-primary--xx-dark);
  --color--line: var(--global-color-primary--normal);

  & h2,
  & .h2 {
    color: var(--global-color-secondary--light);
  }
}

/* Modifers: Style: Text & Background */

:--o-section--style {
  --fake-bkgd-horiz: 100vw;
  --fake-bkgd-spread: 100vw;
  --fake-bkgd-color: var(--color--bkgd);
  --fake-bkgd:
    var(--fake-bkgd-horiz) 0 0 var(--fake-bkgd-spread) var(--fake-bkgd-color),
    calc(-1 * var(--fake-bkgd-horiz)) 0 0 var(--fake-bkgd-spread) var(--fake-bkgd-color);

  position: relative;
  isolation: isolate;

  color: var(--color--text);
  background-color: var(--color--bkgd);

  /* To extend background color wider than section */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;

    box-shadow: var(--fake-bkgd);

    /* To prevent horizontal scrolling */
    /* FAQ: Done via pseudo-element not element to not clip parent content */
    clip-path: inset(0 calc(-1 * var(--fake-bkgd-horiz)));
  }
}
/* Nested sections must not stretch to page edge */
:--o-section--style :--o-section--style {
  background-color: var(--color--bkgd);

  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}

/* Modifers: Style: Borders */

/* To add border between same-style sections */
:--o-section--light + :--o-section--light,
:--o-section--accent + :--o-section--accent,
:--o-section--muted + :--o-section--muted,
:--o-section--dark + :--o-section--dark {
  box-shadow: inset 0 var(--global-border-width--normal) 0 0 var(--color--line);
}

/* To add borders above and below a section AND its extended background */
:--o-section--border {
  --border-width: var(--global-border-width--normal);
  --border-color: var(--color--line, var(--global-color-primary--dark));
  --border: var(--border-width) solid var(--border-color);

  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 100vw;
    pointer-events: none;
    box-sizing: border-box;

    /* FAQ: translateX avoids margin-based 100vw horizontal scroll (bordered → plain seam) */
    transform: translateX(-50%);

    border-top: var(--border);
  }
}
/* To add bottom border only when not followed by another bordered section */
:--o-section--border:not(:has(+ :--o-section--border))::after {
  border-bottom: var(--border);
}

/* To add borders above and below a nested section */
:--o-section :--o-section--border {
  border-top: var(--border);
  box-shadow: none;
}
:--o-section :--o-section--border:not(:has(+ :--o-section--border)) {
  border-bottom: var(--border);
}




/* Modifers: Layout */
/* FP-1463: Extract to new layout object */

.o-section--layout-a,
.o-section--layout-b,
.o-section--layout-c,
.o-section--layout-d {
  /* GH-99: Use standard spacing value */
  --gap: 3.0rem; /* to allow instances to re-use the gap value */

  gap: var(--gap);
}
.o-section--layout-a { @mixin layout--a; }
.o-section--layout-b { @mixin layout--b; }
.o-section--layout-c { @mixin layout--c; }
.o-section--layout-d { @mixin layout--d; }



/* Modifers: Banner */
/* FP-1462: Extract to new banner component(s) */





/* Children */



/* Children: Banner Image */
/* FP-1462: Extract to new banner component(s) */

/* Added `.o-section--banner` to require parent modifier class in markup */
.o-section--banner :--o-section__banner-image {

  /* To size image to cover section dimensions but maintain ratio */
  /* CAVEAT: This causes image to overflow beyond section */
  /* TODO: Try `max-width: 100%` as in Core-Styles#331 */
  /* CAVEAT: The `vw` causes shrinkage on screen narrower than body min-width */
  /* SEE: "Tricks" section */
  width: 100vw;
  min-height: 100%;
  object-fit: cover;

  /* To center image within section */
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}



/* Children: Banner Overlay */
/* FP-1462: Extract to new banner component(s) */

/* Added `.o-section--banner` to require parent modifier class in markup */
.o-section--banner :--o-section__banner-overlay {
  position: relative;
  z-index: 2;
}





/* Tricks */



/* Tricks: Children */

/* To hide margin that is likely undesirable */
/* WARNING: This "feature" was not reviewed by design */
:--o-section > *:last-child {
  margin-bottom: 0;
}