// Name:            Story
// Description:     Shows news content of any kind
//
// Component:       `c-story`
//
//
// Modifiers:       `c-story--stack`
//                  `c-story--inline`
//                  `c-story--inset`
//                  `c-story--card`
//                  `c-story--overlay`
//                  'c-story--square-dark'
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/colors.mode`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================

$story-header-width: 85%;
$story-header-border-width: 3px;
$story-header-border-style: solid;
$story-sublink-dot-size: 3px;
$story-number-color: var(--story-number-color);
$story-number-size: 2rem;
$story-number-font: var(--font-sans-grotesk);
$story-number-lineheight: 2.5rem;

// ========================================================================

.c-story {

  // Custom properties
  // ======================================================================

  --story-number-color: #{$text-02};
  --story-kicker-bg: #{$category-01-dark};
  --story-kicker-text: var(--theme-color);

  [data-accessibility*="on"] & {
    --story-kicker-text: var(--body-color);
  }

  // ========================================================================

  display: grid;
  grid-template-columns: 1fr;
  align-content: start;

  // ======================================================================

  @media (prefers-color-scheme: dark) {
    body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {
      --story-number-color: #{$inverse-01};
    }
  }

  [data-channel*="/foto/"]:not([data-color-scheme="user-light"]) &,
  [data-channel*="/video/"]:not([data-color-scheme="user-light"]) &,
  body[data-color-scheme*="dark"]:not([data-model*="sponsor"]) &,
  #{$global-background-dark} &,
  #{$global-background-primary-dark} & {
    --story-number-color: #{$inverse-01};
  }

  &--square-dark {
    gap: 1rem;

    @include bp(md) {
      align-content: center;
      align-items: center;
      grid-template-rows: 1fr;
    }
  }

  &--podcast,
  &--inset,
  &--stack,
  &--card,
  &--overlay,
  &--inline,
  &--inline-xs,
  &--inline-xs-reverse,
  &--inline-sm,
  &--inline-sm-reverse,
  &--inline-lg,
  &--square-dark {

    grid-template-areas:
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";

    .c-story__content {
      grid-area: headline;
    }
  }

  &--square-dark,
  &--inline {
    @include bp(md) {
      grid-template-areas:
        "headline media"
        "summary media"
        "sublinks sublinks"
        "byline byline";
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &--inline-sm {
    @include bp(md) {
      grid-template-areas:
        "headline headline headline headline headline media media media"
        "summary summary summary summary summary media media media"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }
  }

  &--inline-sm-reverse {
    @include bp(md) {
      grid-template-areas:
        "media media media headline headline headline headline headline"
        "media media media summary summary summary summary summary"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }
  }

  &--inline-xs {
    @include bp(md) {
      grid-template-areas:
        "headline headline headline headline headline media media media"
        "summary summary summary summary summary media media media"
        "sublinks sublinks sublinks sublinks sublinks sublinks sublinks sublinks"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }

    @include bp(lg) {
      grid-template-areas:
        "headline headline headline media"
        "summary summary summary media"
        "sublinks sublinks sublinks sublinks"
        "byline byline byline byline";
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &--inline-xs-reverse {
    @include bp(md) {
      grid-template-areas:
        "media media media headline headline headline headline headline"
        "media media media summary summary summary summary summary"
        "sublinks sublinks sublinks sublinks sublinks sublinks sublinks sublinks"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }

    @include bp(lg) {
      grid-template-areas:
        "media headline headline headline"
        "media summary summary summary"
        "sublinks sublinks sublinks sublinks"
        "byline byline byline byline";
      grid-template-columns: repeat(4, 1fr);
    }
  }


  &--inline-square {
    grid-template-areas:
      "headline"
      "media"
      "summary"
      "sublinks"
      "byline";

    .c-story__content {
      grid-area: headline;
    }

    @include bp(md) {
      grid-template-areas:
        "headline headline headline headline media media"
        "headline headline headline headline media media";
      grid-template-columns: repeat(6, 1fr);
    }
  }

  &--inline-square-reverse {
    grid-template-areas:
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";

    .c-story__content {
      grid-area: headline;
    }

    @include bp(md) {
      grid-template-areas:
        "media media headline headline headline headline"
        "media media headline headline headline headline";
      grid-template-columns: repeat(6, 1fr);
    }
  }

  &--podcast {
    column-gap: 1rem;

    @include bp(md) {
      grid-template-areas:
        "media media headline headline headline headline headline headline"
        "media media summary summary summary summary summary summary"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }
  }

  &--inline-lg {
    @include bp(md) {
      grid-template-areas: "headline headline headline media media media";
      grid-template-columns: repeat(6, 1fr);
    }
  }

  &--search {
    grid-template-areas:
      "media"
      "byline"
      "content";
    border-bottom: 1px solid var(--divider-color);

    @include bp(sm) {
      grid-template-areas:
        "byline byline media"
        "content content media";
      grid-template-columns: repeat(3, 1fr);
    }

    @include bp(lg) {
      grid-template-areas:
        "byline content content content content media"
        "byline content content content content media";
      grid-template-columns: repeat(6, 1fr);
    }
  }

  &--live {
    grid-template-areas:
      "byline"
      "content";
    border-top: 1px solid var(--theme-color);
    border-bottom: 1px solid var(--divider-color);

    @include bp(md) {
      grid-template-areas: "byline content";
    }

    .c-story__body>p {
      margin-top: 0;
    }

    .c-story__body>p>a {
      color: var(--link-color);
      text-decoration-color: $ui-04;
      text-decoration-skip: ink;
      text-underline-offset: 2px;

      &:hover {
        text-decoration-color: var(--link-color);
      }
    }

    img[style] {
      width: auto !important;
      height: auto !important;
    }
  }

  &--inset {
    grid-template-areas:
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";

    @include bp(md) {
      grid-template-areas:
        "headline headline headline"
        "summary summary media"
        "sublinks sublinks media"
        "byline byline media";
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &--card {
    align-items: stretch;
  }

  &--editorial {
    grid-template-areas:
      "headline thumb"
      "byline byline"
      "summary summary";
    gap: .2rem;
  }

  &--focus {
    grid-template-areas:
      "media"
      "content";

    @include bp(md) {
      grid-template-areas:
        "content content content content content media media media";
      grid-template-columns: repeat(8, 1fr);
    }
  }

  &--cover-image {
    grid-template-areas:
      "content";

    @include bp(md) {
      grid-template-areas:
        "content content content content content media media media";
      grid-template-columns: repeat(8, 1fr);
    }

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 100%;
      background-color: #{rgba($ui-02,.6)};
      z-index: -1;
    }
  }

  &__byline {
    grid-area: byline;

    .c-story--editorial & {
      color: var(--story-kicker-text);
    }

    .c-story--search & {
      display: flex;
    }

    .c-story--search & {
      @include bp(lg) {
        display: block;
      }
    }
  }

  &__content {
    grid-area: content;

    .c-story--podcast & {
      text-align: center;

      @include bp(md) {
        text-align: left;
      }
    }

    [data-section-key="article-footer-natives"] & {
      padding: 0 $padding-small;
    }
  }

  &__header {

    .c-story--square-dark & {
      @include bp(lg) {
        padding: 0 $padding-xxxlarge;
      }
    }

    .c-story--live & {

      iframe {
        max-width: 100%;
      }
    }

    .c-story--card & {
      position: relative;
      width: $story-header-width;
      margin: -$margin-xlarge auto 0;
      padding: $padding-base;
      border-top-width: $story-header-border-width;
      border-top-style: $story-header-border-style;
      border-top-color: var(--story-header-border);
      background: var(--background-color);

      @include bp(lg) {
        padding-top: $padding-medium;
      }
    }

    [data-section-key="article-footer-natives"] & {
      padding: 0 $padding-small;
    }

  }

  &__heading {
    .c-story--overlay & {
      @include type(heading-06);

      @include bp(lg) {
        @include type(heading-05);
      }
    }
  }

  &__media {
    grid-area: media;
    margin-bottom: $margin-small;

    img {
      transition: transform 9s ease-in-out;

      .c-story:not(.c-story--focus):hover & {
        transform: scale(1.3);
      }
    }

    .c-story--inline-square-reverse &,
    .c-story--inline-xs-reverse &,
    .c-story--inline-sm-reverse & {
      @include bp(md) {
        margin-bottom: 0;
        margin-right: $margin-small;
      }
    }

    .c-story--inline &,
    .c-story--inline-sm &,
    .c-story--inline-lg &,
    .c-story--focus &,
    .c-story--inset & {
      @include bp(md) {
        margin-bottom: 0;
      }
    }

    .c-story--inline &,
    .c-story--inline-sm &,
    .c-story--inline-lg &,
    .c-story--focus & {
      @include bp(md) {
        margin-left: $margin-small;
      }
    }

    .c-story--inset & {
      @include bp(md) {
        margin-top: $margin-small;
        padding-left: $padding-small;
      }
    }

    .c-story--overlay & {
      width: 100%;
      height: 100%;
      margin-bottom: 0;
      object-fit: cover;
      object-position: center;
      @include z(undercover);
    }

    .c-story--podcast & {
      width: 70%;
      margin: 0 auto $margin-small;

      @include bp(md) {
        width: auto;
        margin: inherit;
        margin-left: 0.75rem;
      }
    }
  }

  &__number {
    top: $margin-medium;
    left: 0;
    color: $story-number-color;
    font-family: $story-number-font;
    font-size: $story-number-size;
    font-weight: 700;
    line-height: $story-number-lineheight;

    // .l-list-border > *:first-child & {
    //   top: 0;
    // }

    .l-list-multi-column>*:first-child & {
      top: $margin-medium;
    }
  }

  // 1. Prevent bad alignments in focus single layout
  &__badge {
    --_badge-bg: var(--kicker-bg);
    background-color: var(--_badge-bg);

    .c-story--dossier & {
      --_badge-bg: #{$dossier-base};
      color: #{$ui-07};
    }

    body[data-channel*="podcast"] &,
    body[data-model*="podcast"] & {
      --kicker-bg: #{$podcast-base};
    }

    // body[data-channel*="cibo"] &,
    // body[data-edition="cibotoday"] & {
    //   display: none;
    // }
  }

  &__kicker {
    grid-area: kicker;
    align-self: self-start; // 1
    color: var(--story-kicker-text);

    .c-story--dossier & {
      span {
        color: #{$ui-01};
        background-color: #{$ui-07};
        padding: $padding-xxxsmall $padding-xxsmall;
      }
    }

    a {
      color: var(--story-kicker-text);
    }

    .c-story--overlay & {
      background-color: var(--theme-color);
      color: $inverse-01;

      [data-accessibility*="on"] & {
        background-color: #{$ui-07};
      }
    }

    .c-story--square-dark & {
      color: $inverse-01;
    }

    [data-theme="today"] .c-story--overlay & {
      background-color: var(--story-kicker-bg);
      color: $inverse-01;
    }

  }

  &__play {
    position: absolute;
    bottom: $margin-base;
    left: $margin-base;
    @include z(cover);
  }

  &__summary {
    grid-area: summary;
    margin-top: $margin-xsmall;

    p {
      margin: 0;
      color: var(--body-secondary-color);
      @include type(body-03);
    }
  }

  &__sublinks {
    position: relative;
    grid-area: sublinks;

    &::before {
      display: block;
      content: '';
      width: 30px;
      height: 1px;
      margin-bottom: $margin-small;
      background-color: var(--divider-color);
    }

    .c-story__sublink:not(:last-child) {
      margin-bottom: $margin-xsmall;
    }

    .c-story__kicker {
      color: var(--body-secondary-color);
    }
  }

  &__thumb {
    --story-thumb-size: 4rem;
    grid-area: thumb;
    width: var(--story-thumb-size);
    height: var(--story-thumb-size);
  }

  &__live {
    border-top: 1px solid $ui-01-50;
    margin: 0 #{-$margin-base} #{-$margin-base};
  }
}