// Bug 1964453: Some styles here may appear duplicative — due to @includes, @container and media queries, certain rules are intentionally overwritten rather than relying on cascade behavior.

@mixin section-card-small {
  grid-row: span 1;
  grid-column: span 1;
  padding: var(--space-large);

  &.ds-card.sections-card-ui {
    padding: unset;
    box-shadow: var(--card-box-shadow);

    &:hover {
      box-shadow: var(--card-box-shadow-hover);
    }

    &:not(.placeholder) .img-wrapper>.ds-image.img>img {
      border-radius: var(--border-radius-medium);
    }
  }

  .meta {
    display: flex;
    flex-direction: column;
    padding: 0;
    align-self: flex-start;
    min-height: 125px;

    .info-wrap {
      flex-grow: 0;
      max-width: 150px;
      margin-block-start: var(--space-xsmall);

      .title {
        font-size: var(--font-size-small);
        margin-block: 0;
        -webkit-line-clamp: 4;
      }
    }

    .sections-card-footer {
      margin-block-start: auto;
      margin-block-end: var(--space-small);
      max-width: 150px;
      min-width: auto;
      min-height: unset;
      position: initial;
    }
  }

  &.ds-card.sections-card-ui {
    .card-stp-button-hover-background .card-stp-button-position-wrapper {
      inset-inline-end: var(--space-xsmall);
    }
  }

  .context-menu-position-container .context-menu-button {
    height: 32px;
    width: 32px;
  }

  .ds-card-link {
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    position: relative;
    align-items: center;
    gap: var(--space-medium);
    padding: var(--space-xsmall) var(--space-small);
  }

  .img-wrapper {
    width: 110px;
    height: 117px;
    flex-shrink: 0;
    flex-grow: 0;
    aspect-ratio: 5/6;

    .ds-image.img {
      width: 100%;
      height: 100%;
      padding-block-start: 0;
      min-width: 100%;
    }

    .ds-image.img img {
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius-medium);
      object-fit: cover;
    }
  }

  .card-stp-button-hover-background {
    background: transparent;
    padding-block-start: unset;
  }

}

@mixin section-card-medium {
  grid-row: span 2;
  grid-column: span 1;
  flex-direction: column;
  padding: 0;
  align-items: initial;
  gap: initial;

  &.ds-card.sections-card-ui {
    height: unset;
    box-shadow: var(--card-box-shadow);

    &:hover {
      box-shadow: var(--card-box-shadow-hover);
    }
  }

  .img-wrapper {
    width: 100%;
    height: 160px;
    position: relative;
    // reset values inherited from small card mixin
    flex-grow: 0;
    flex-shrink: 0;
    aspect-ratio: initial;
  }

  &.ds-spoc-rectangle {
    .img-wrapper {
      height: 250px;
    }
  }

  .meta {
    display: flex;
    flex-direction: column;
    padding: var(--space-large) var(--space-large) var(--space-small);
    min-height: unset;

    .info-wrap {
      flex-grow: initial;
      max-width: unset;

      .title {
        -webkit-line-clamp: 3;
        margin-block: 0 var(--space-small);
        font-size: var(--font-size-root);
      }

      .excerpt {
        display: block;
        -webkit-line-clamp: 3;
      }
    }

    .sections-card-footer {
      margin-block-start: auto;
      margin-block-end: unset;
      inset-inline-end: initial;
      min-height: 28px;
      padding-inline-end: var(--space-xxlarge);

      .source-wrapper {
        max-width: none;
      }
    }

    &:has(.story-footer .story-sponsored-label) {
      .sections-card-footer {
        display: none;
      }

      .story-footer {
        margin-block: auto 0;
      }
    }
  }

  .context-menu-position-container .context-menu-button {
    height: 32px;
    width: 32px;
  }

  &.ds-card.sections-card-ui {
    .card-stp-button-hover-background .card-stp-button-position-wrapper {
      inset-inline-end: var(--space-small);
    }
  }

  .card-stp-button-hover-background {
    background: transparent;
  }

  &:hover,
  &:active,
  &:focus-within,
  &.active {
    .meta {
      .source-wrapper .source {
        display: block;
      }
    }
  }

  .ds-card-link {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  &:not(.placeholder, .ds-spoc-rectangle) {
    .img-wrapper>.ds-image.img>img {
      border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    }
  }
}

@mixin section-card-large {
  grid-row: span 2;
  grid-column: span 2;

  &.ds-card.sections-card-ui {
    box-shadow: var(--card-box-shadow);

    @media ($break-point-layout-variant <=width < $break-point-widest),
      (min-width: $break-point-sections-variant) {
      .ds-card-link {
        gap: var(--space-large);
        padding: var(--space-large);
      }

      .meta {
        padding: 0;
        color: var(--newtab-text-primary-color);

        .info-wrap .excerpt {
          color: var(--text-color-deemphasized);
        }

        .sections-card-footer {
          max-width: 334px;

          .source-wrapper {
            max-width: 245px;
          }
        }
      }

      .card-stp-button-position-wrapper {
        inset-inline-end: var(--space-large);
        inset-block-end: var(--space-large);
      }

      &:hover,
      &:active,
      &:focus-visible,
      &.active {
        .meta .source-wrapper .source {
          display: block;
        }
      }
    }

    &:hover {
      box-shadow: var(--card-box-shadow-hover);
    }
  }

  &.ds-card.sections-card-ui {
    @media (min-width: $break-point-layout-variant) {
      align-content: flex-start;
      justify-content: center;

      .ds-card-link {
        flex-direction: row;
        gap: var(--space-large);
        padding: var(--space-large);
        flex-grow: 0;
      }

      .img-wrapper {
        width: 190px;
        height: 250px;
      }

      .ds-image.img {
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;

        img {
          border-radius: var(--border-radius-medium);
        }
      }

      .meta {
        padding: 0;
        min-height: 220px;

        .title {
          -webkit-line-clamp: 3;
          font-size: var(--font-size-large);
          font-weight: var(--font-weight-heading);
          margin-block: 0 var(--space-small);
        }

        .excerpt {
          -webkit-line-clamp: 4;
          font-size: var(--font-size-root);
        }

        .sections-card-footer {
          max-width: 380px;
          margin-block-start: auto;
          margin-block-end: var(--space-xxsmall);
          display: flex;
          align-items: center;
        }
      }

      .card-stp-button-hover-background {
        background: transparent;
        inset-inline-start: 0;

        .card-stp-button-position-wrapper {
          inset-block-end: var(--space-large);
        }
      }
    }
  }

}

.has-sections-grid .ds-outer-wrapper-breakpoint-override {
  .ds-layout-topsites {
    position: relative;

    .top-sites-list-wrapper {
      margin-inline: auto;
      width: 100%;
    }

    .hide-for-narrow {
      display: none;

      @media (min-width: $break-point-large) {
        display: none;
      }

      @media (min-width: $break-point-widest) {
        display: inline-block;
      }
    }
  }
}

.has-sections-grid {
  .ds-outer-wrapper-breakpoint-override main {
    width: auto;

    .ds-card {
      // card should take up available space in grid
      width: 100%;
      height: 100%;
    }

    .body-wrapper {
      width: 346px;
      margin: 0 auto;
    }

    @media (min-width: $break-point-medium) {
      width: auto;

      .body-wrapper {
        width: 346px;
      }
    }

    @media (min-width: $break-point-layout-variant) {
      width: auto;

      .body-wrapper {
        width: 659px;
      }
    }

    @media (min-width: $break-point-widest) {
      width: auto;

      .body-wrapper {
        width: 975px;
      }
    }

    @media (min-width: $break-point-sections-variant) {
      width: auto;

      .body-wrapper {
        display: flex;
        flex-direction: column;
        width: 1290px;
      }

      .ds-highlights .card-outer {
        min-width: 216px;
      }
    }
  }
}

.ds-section-wrapper {
  padding-inline: 0;
  position: relative;

  .ds-section {
    padding-block-end: var(--space-medium);

    &:last-child {
      padding-block-end: 0;
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-block: var(--space-small) var(--space-medium);

    }

    .section-title {
      @include wallpaper-contrast-fix;

      font-weight: var(--font-weight-heading);
      font-size: var(--font-size-xlarge);
      color: var(--newtab-contextual-text-primary-color);
      margin-block: 0;

      @media (min-width: $break-point-layout-variant) {
        font-size: var(--font-size-xxlarge);
      }
    }

    .section-subtitle {
      @include wallpaper-contrast-fix;

      color: var(--newtab-contextual-text-primary-color);
      margin-block: var(--space-xsmall) 0;
      font-size: var(--font-size-root);
    }

    // @nova-cleanup(remove-conditional): Remove .nova-enabled wrapper, make default
    .nova-enabled & {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }
  }

  .section-context-wrapper {
    @include wallpaper-contrast-fix;

    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-small);
  }

  .section-follow {
    position: relative;

    .section-button-following-text {
      display: none;
    }

    .section-button-unfollow-text {
      display: none;
    }

    &.following {
      .section-button-follow-text {
        display: none;
      }

      .section-button-following-text {
        display: block;
      }
    }

    &.following:hover {
      .section-button-following-text {
        display: none;
      }

      .section-button-unfollow-text {
        display: block;
      }
    }
  }
}

// @nova-cleanup(remove-conditional): Remove .nova-enabled wrapper, make default
.nova-enabled .ds-section-wrapper .ds-section .section-heading {
  grid-column: 1 / -1;

  .section-title {
    font-size: var(--font-size-heading-large);

    @include at-content-cols(12) {
      font-size: var(--font-size-heading-xlarge);
    }
  }
}

.ds-section-grid.ds-card-grid {
  grid-gap: var(--space-large);
  grid-template-columns: repeat(1, 300px);

  .ds-image {
    &.image-2,
    &.image-3,
    &.image-4 {
      display: none;
    }

    &.image-1 {
      display: block;
    }
  }

  @media (max-width: $break-point-layout-variant) {
    &:not(.nova-enabled *) {
      @for $i from 0 through 16 {
        .col-1-position-#{$i} {
          order: $i;
        }
      }

      .col-1-small {
        @include section-card-small;
      }

      .col-1-medium {
        @include section-card-medium;
      }

      .col-1-large {
        @include section-card-large;
      }

      .col-1-show-excerpt {
        .meta .info-wrap .excerpt {
          display: block;
        }
      }

      .col-1-hide-excerpt {
        .meta .info-wrap .excerpt {
          display: none;
        }
      }
    }
  }

  @media ($break-point-layout-variant <= width < $break-point-widest) {
    &:not(.nova-enabled *) {
      grid-template-columns: repeat(2, 300px);

      @for $i from 0 through 16 {
        .col-2-position-#{$i} {
          order: $i;
        }
      }

      .col-2-small {
        @include section-card-small;
      }

      .col-2-medium {
        @include section-card-medium;
      }

      .col-2-large {
        @include section-card-large;
      }

      .col-2-show-excerpt {
        .meta .info-wrap .excerpt {
          display: block;
        }
      }

      .col-2-hide-excerpt {
        .meta .info-wrap .excerpt {
          display: none;
        }
      }

      .ds-image {
        &.image-1,
        &.image-3,
        &.image-4 {
          display: none;
        }

        &.image-2 {
          display: block;
        }
      }
    }
  }

  @media ($break-point-layout-variant <= width < $break-point-widest) {
    &:not(.nova-enabled *) {
      .col-2-small {
        .meta .info-wrap {
          max-width: 150px;
        }

        .meta .sections-card-footer {
          max-width: 150px;
          min-width: unset;
        }
      }
    }
  }

  @media ($break-point-widest <= width < $break-point-sections-variant) {
    &:not(.nova-enabled *) {
      grid-template-columns: repeat(3, 300px);
      gap: var(--space-large);

      @for $i from 0 through 16 {
        .col-3-position-#{$i} {
          order: $i;
        }
      }

      .col-3-small {
        @include section-card-small;
      }

      .col-3-medium {
        @include section-card-medium;
      }

      .col-3-large {
        @include section-card-large;
      }

      .col-3-show-excerpt {
        .meta .info-wrap .excerpt {
          display: block;
        }
      }

      .col-3-hide-excerpt {
        .meta .info-wrap .excerpt {
          display: none;
        }
      }

      .ds-image {
        &.image-1,
        &.image-2,
        &.image-4 {
          display: none;
        }

        &.image-3 {
          display: block;
        }
      }
    }
  }

  @media (min-width: $break-point-widest) {
    &:not(.nova-enabled *) {
      .col-3-small {
        .meta .info-wrap {
          max-width: 150px;
        }
      }

      .col-3-medium {
        .meta .info-wrap {
          max-width: unset;
        }
      }
    }
  }

  @media (min-width: $break-point-sections-variant) {
    &:not(.nova-enabled *) {
      grid-template-columns: repeat(4, 300px);

      @for $i from 0 through 16 {
        .col-4-position-#{$i} {
          order: $i;
        }
      }

      .col-4-small {
        @include section-card-small;
      }

      .col-4-medium {
        @include section-card-medium;
      }

      .col-4-large {
        @include section-card-large;
      }

      .col-4-show-excerpt {
        .meta .info-wrap .excerpt {
          display: block;
        }
      }

      .col-4-hide-excerpt {
        .meta .info-wrap .excerpt {
          display: none;
        }
      }

      .ds-image {
        &.image-1,
        &.image-2,
        &.image-3 {
          display: none;
        }

        &.image-4 {
          display: block;
        }
      }
    }
  }

  @media (min-width: $break-point-sections-variant) {
    &:not(.nova-enabled *) {
      .col-4-small {
        .meta .info-wrap {
          max-width: 150px;
        }

        .meta .sections-card-footer {
          max-width: 150px;
          min-width: unset;
        }
      }
    }
  }

  // @nova-cleanup(remove-conditional): Remove .nova-enabled wrapper, make default
  .nova-enabled & {
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    row-gap: var(--space-medium);
    margin-block-end: var(--space-xlarge);

    // Exclusive column-count ranges so that cards with multiple col-N-* classes
    // (assigned by JS for all breakpoints simultaneously) only activate one set of
    // mixin styles at a time, avoiding specificity conflicts between mixins.
    @include at-content-cols-range(0, 8) {
      --sections-col-count: 1;

      @for $i from 0 through 16 {
        .col-1-position-#{$i} { order: $i; }
      }

      .col-1-small {
        @include section-card-small;
      }

      .col-1-medium {
        @include section-card-medium;
      }

      .col-1-large {
        @include section-card-medium;
      }

      .col-1-small,
      .col-1-medium,
      .col-1-large {
        grid-column: span 1;
      }
    }

    @include at-content-cols-range(8, 12) {
      --sections-col-count: 2;

      @for $i from 0 through 16 {
        .col-2-position-#{$i} { order: $i; }
      }

      .col-2-small {
        @include section-card-small;
      }

      .col-2-medium {
        @include section-card-medium;
      }

      .col-2-large {
        @include section-card-large;
      }

      .col-2-small,
      .col-2-medium {
        grid-column: span 1;
      }

      .col-2-large {
        grid-column: span 2;
      }

      .ds-image.image-1, .ds-image.image-3, .ds-image.image-4 { display: none; }
      .ds-image.image-2 { display: block; }
    }

    @include at-content-cols-range(12, 16) {
      --sections-col-count: 3;

      @for $i from 0 through 16 {
        .col-3-position-#{$i} { order: $i; }
      }

      .col-3-small {
        @include section-card-small;
      }

      .col-3-medium {
        @include section-card-medium;
      }

      .col-3-large {
        @include section-card-large;
      }

      .col-3-small,
      .col-3-medium {
        grid-column: span 1;
      }

      .col-3-large {
        grid-column: span 2;
      }

      .ds-image.image-1, .ds-image.image-2, .ds-image.image-4 { display: none; }
      .ds-image.image-3 { display: block; }
    }

    @include at-content-cols(16) {
      --sections-col-count: 4;

      @for $i from 0 through 16 {
        .col-4-position-#{$i} { order: $i; }
      }

      .col-4-small {
        @include section-card-small;
      }

      .col-4-medium {
        @include section-card-medium;
      }

      .col-4-large {
        @include section-card-large;
      }

      .col-4-small,
      .col-4-medium {
        grid-column: span 1;
      }

      .col-4-large {
        grid-column: span 2;
      }

      .ds-image.image-1, .ds-image.image-2, .ds-image.image-3 { display: none; }
      .ds-image.image-4 { display: block; }
    }
  }

  // @nova-cleanup(remove-conditional): Remove .nova-enabled wrapper, make default
  .nova-enabled .ds-section:last-child & {
    margin-block-end: 0;
  }
}