@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 {
    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 {
    color: var(--global-color-secondary--light);
  }
}

/* Modifers: Style: Text & Background */

:--o-section--style {
  --box-shadow--fake-bkgd: 50vw 0 var(--color--bkgd),
                          -50vw 0 var(--color--bkgd);

  color: var(--color--text);
  background-color: var(--color--bkgd);
  box-shadow: var(--box-shadow--fake-bkgd);
}
/* Nested sections must not stretch to page edge */
:--o-section--style :--o-section--style {
  box-shadow: 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 {
  border-top: 1px solid var(--color--line);
}



/* 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 { @extend .x-layout--a; }
.o-section--layout-b { @extend .x-layout--b; }
.o-section--layout-c { @extend .x-layout--c; }
.o-section--layout-d { @extend .x-layout--d; }



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

:--o-section--style.o-section--banner + :--o-section--style {
  box-shadow: var(--box-shadow--fake-bkgd);
}





/* 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;
}