/*
Callout

Interrupt or end Sections with a "call to action".

Markup: c-callout.html

Styleguide Components.Callout
*/
@import url("../tools/media-queries.css");
@import url("../tools/x-article-link.css");





/* Layout */

.c-callout {
  --figure-width--no-units: 310;
  --figure-height--no-units: 130;

  display: grid;
}
.c-callout > :is(img, figure)            { grid-area: figure; }
.c-callout > :is(h1, h2, h3, h4, h5, h6) { grid-area: title; }
.c-callout > p                           { grid-area: desc; }

/* Let title `margin-top` and desc `margin-bottom` manage gap between them */
/* FAQ: Bootstrap does this too but auto. pattern library has no Bootstrap */
.c-callout > p { margin-top: 0; }



/* Layout: Figure / Image */

/* Ensure title and desc determine height of figure and callout */
/* FAQ: Options that use `min-height: 0` have bug (narrow cell) on Firefox:
        - https://stackoverflow.com/a/48943583/11817077
        - https://stackoverflow.com/a/61297418/11817077 */
.c-callout > img,
.c-callout > figure > img {
  object-fit: cover;

  aspect-ratio: var(--figure-width--no-units) / var(--figure-height--no-units);
  /* NOTE: The required height or width property is set within media queries */
  /* CAVEAT: If using `aspect-ratio`:
              - image can grow beyond intrinsic size
              - `max-width|height` appears ineffectual
              - `width|height` breaks `aspect-ratio` */
}

/* Wrap figcaption at figure width */
.c-callout > figure { width: min-content; }



/* Layout: Wide Screen */

@media only screen and (--narrow-and-above) {
  .c-callout {
    padding: 20px;
    text-align: left;

    grid-template-columns: min-content auto; /* prevent extra figure h. space */
    grid-template-rows: auto min-content;    /* prevent extra title v. space */
    grid-template-areas:
      'figure title'
      'figure desc';
  }

  /* Create gap without using `*-gap` property on container */
  /* FAQ: Container does not know if it has figure but gap is only for figure */
  .c-callout > figure { margin: 0; /* overwrite browser and Bootstrap */ }
  .c-callout > :is(img, figure) { margin-right: 40px;}



  /* Layout: Wide Screen: Figure / Image */

  /* Trigger ratio, Limit stretch */
  .c-callout > img,
  .c-callout > figure > img {
    width: calc( var(--figure-width--no-units) * 1px);
    max-width: fit-content;
  }
  /* Let image grow tall */
  .c-callout > img {
    min-height: 100%;
  }
}



/* Layout: Narrow Screen */

@media only screen and (--narrow-and-below) {
  .c-callout {
    padding: 20px 40px;
    text-align: center;

    grid-template-areas:
      'figure'
      'title'
      'desc';
  }

  /* Create gap without using `*-gap` property on container */
  /* FAQ: Container does not know if it has figure but gap is only for figure */
  .c-callout > figure { margin: 0; /* overwrite browser and Bootstrap */ }
  .c-callout > :is(img, figure) { margin-bottom: 20px;}



  /* Layout: Narrow Screen: Figure / Image */

  /* Trigger ratio, Limit stretch */
  .c-callout > img,
  .c-callout > figure > img {
    height: calc( var(--figure-height--no-units) * 1px);
    max-height: fit-content;
  }
  /* Let image grow wide */
  .c-callout > img {
    min-width: 100%;
  }
}

/* Align figure to exact center (only relevant if content is smaller) */
.c-callout > :is(img, figure) { place-self: center; }

/* Force wrap before full width (to match design) */
/* NOTE: 1200px window, design has 15px but this was 7px (wraps the same) */
/* FAQ: Using a percentage so narrow screen wrap limit is not noticeable */
.c-callout > p { padding-right: 1%; }





/* Style */

.c-callout {
  background-color: var(--global-color-accent--normal);
}

/* Make all headings look the same */
.c-callout > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--global-color-primary--xx-light);

  font-size: var(--global-font-size--x-large);
  font-weight: var(--medium);
}
/* override html-elements.css */
.c-callout > :is(h1, h2, h3, h4, h5, h6),
/* override o-section.css */
[class*="o-section--style"] .c-callout > :is(h1, h2, h3, h4, h5, h6) {
  color: var(--global-color-primary--xx-light); /* override h1–h6 styles */
}

/* Style non-headings */
.c-callout > :not(h1, h2, h3, h4, h5, h6) {
  color: var(--global-color-primary--xx-light);
}
/* FAQ: Ignore figures so figcaptions can be styled by other components */
/* FAQ: Do not ignore images, so alt text is visible if image load fails */
.c-callout > :not(h1, h2, h3, h4, h5, h6, figure) {
  font-size: var(--global-font-size--large);
  font-weight: var(--medium);
}





/* As a Link */

a.c-callout:hover { @mixin article-link-hover; text-decoration: none; }
a.c-callout:active { @mixin article-link-active; }
a.c-callout:focus { text-decoration: none; }