@import './component-lfd-product-symbols.css';

/* ==========================================================================
   Product Description / Details - tabbed card

   ========================================================================== */
.section.section--lfd-product-details {
  --pdp-card-radius: 2.4rem;
  --pdp-border: rgba(16, 24, 40, 0.08);
  --pdp-muted: rgba(var(--color-foreground), 0.62);
  /* Soft lift for the card; controls on it stay flat (hairline at most) */
  --pdp-shadow-card:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 6px 16px -6px rgba(16, 24, 40, 0.08);
  --pdp-shadow-control: 0 1px 2px rgba(16, 24, 40, 0.06);

  .product__details--container {
    padding-top: 1.6rem;
    padding-bottom: 4.8rem;
  }

  /* Segmented tab control */
  .product-info-tabs__list {
    display: inline-flex;
    gap: 0.4rem;
    margin-bottom: 2.4rem;
    padding: 0.6rem;
    border-radius: 999px;
    background: #ececee;
  }

  .product-info-tabs__tab {
    padding: 1.2rem 2.8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pdp-muted);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      color: rgb(var(--color-foreground));
    }

    &[aria-selected='true'] {
      background: #fff;
      color: var(--rails-blue);
      box-shadow: var(--pdp-shadow-control);
    }

    &:focus-visible {
      outline: 2px solid var(--rails-blue);
      outline-offset: 2px;
    }
  }

  /* The card */
  .product-info-tabs__panel {
    position: relative;
    border: 1px solid var(--pdp-border);
    border-radius: var(--pdp-card-radius);
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
    box-shadow: var(--pdp-shadow-card);
    overflow: hidden;

    &[hidden] {
      display: none;
    }

    &:focus-visible {
      outline: 2px solid var(--rails-blue);
      outline-offset: 3px;
    }
  }

  /* Panel headings */
  .product-info-tabs__title {
    margin: 0 0 2rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--pdp-border);
  }

  .product__details--wrapper .product-info-tabs__title {
    margin: 0;
    padding: 2.4rem 2.4rem 1.6rem;

    @media screen and (min-width: 750px) {
      padding: 3.2rem 4rem 2rem;
    }
  }

  /* Description */
  .product__description--wrapper {
    padding: 2.4rem;

    @media screen and (min-width: 750px) {
      padding: 3.2rem 4rem;
    }
  }

  .product__description {
    position: relative;
    max-width: 100%;
    width: 100%;

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }

    .grid__item {
      width: 100%;
      max-width: 100%;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    p strong {
      font-size: unset !important;
    }

    *[style] {
      font-size: unset !important;
    }

    /* Collapsed: fixed height with a fade into the card */
    &.is-clamped {
      max-height: 36rem;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 12rem;
        background: linear-gradient(180deg, rgba(252, 252, 253, 0) 0%, #fcfcfd 85%);
        pointer-events: none;
      }
    }
  }

  .product__description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.2rem 2.4rem;
    border: 1px solid rgba(16, 24, 40, 0.16);
    border-radius: 999px;
    background: #fff;
    color: var(--rails-blue);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;

    &[hidden] {
      display: none;
    }

    &:hover {
      border-color: rgba(54, 92, 121, 0.45);
      background: rgba(54, 92, 121, 0.04);
    }

    &:focus-visible {
      outline: 2px solid var(--rails-blue);
      outline-offset: 2px;
    }

    .icon-caret {
      width: 1rem;
      height: auto;
      transition: transform 0.2s ease;
    }

    &[aria-expanded='true'] .icon-caret {
      transform: rotate(180deg);
    }
  }

  /* Details table */
  .product__details {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    box-shadow: none;

    tbody {
      border: 0;
    }

    tr {
      border: 0;
      border-bottom: 1px solid var(--pdp-border);

      &:last-child {
        border-bottom: 0;
      }
    }

    th,
    td {
      padding: 2rem 2.4rem;
      border: 0;
      text-align: left;
      vertical-align: top;

      @media screen and (min-width: 750px) {
        padding: 2.4rem 4rem;
      }
    }

    th {
      width: 30%;
      max-width: 28rem;
      font-weight: normal;
      color: var(--pdp-muted);
    }

    td a:not(.product__details--tag) {
      color: rgb(var(--color-foreground));
      text-decoration: none;

      &:hover {
        color: var(--rails-blue);
        text-decoration: underline;
        text-underline-offset: 0.3rem;
      }
    }

    /* Features list (era, DCC etc) */
    .product-symbols-wrapper {
      min-height: 0;
      text-align: left;
    }

    .product-symbols.verbose {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin: 0;
      padding: 0;

      & > li {
        display: flex;
        align-items: center;
        min-height: 2.6rem;
        margin: 0;
        padding-left: 3.8rem;
        background-size: 2.6rem 2.6rem;
        background-position: left center;
        line-height: 1.3;
      }

      & > li:last-child {
        padding-left: 0;

        a {
          color: var(--rails-blue);
          text-decoration: underline;
          text-underline-offset: 0.3rem;
        }
      }
    }

    /* Collection chips */
    .product__details--tags {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    a.product__details--tag {
      display: inline-block;
      padding: 0.8rem 1.8rem;
      border-radius: 999px;
      background: #f0f0f2;
      color: rgb(var(--color-foreground));
      text-decoration: none;
      line-height: 1.3;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

      &:hover {
        background: #fff;
        color: var(--rails-blue);
        box-shadow: inset 0 0 0 1px rgba(54, 92, 121, 0.35);
      }
    }

    /* Social share icons */
    .social-sharing {
      font-size: 1.4em;

      a {
        color: rgba(var(--color-foreground), 0.8);
        text-decoration: none;
        transition: color 0.2s ease;

        &:not(:first-child) {
          margin-left: 1.2rem;
        }

        &:hover {
          color: var(--rails-blue);
        }

        svg {
          max-height: 1em;
          max-width: 1em;
        }
      }
    }
  }

  @media screen and (max-width: 749px) {
    .product-info-tabs__list {
      display: flex;
    }

    .product-info-tabs__tab {
      flex: 1 1 0;
      padding: 1.2rem 1.6rem;
    }

    /* Stack each row: label above value */
    .product__details {
      tr:not(.product__details--categories) {
        display: block;
        padding: 1.6rem 2.4rem;
      }

      tr:not(.product__details--categories) th,
      tr:not(.product__details--categories) td {
        display: block;
        width: auto;
        padding: 0;
      }

      th {
        margin-bottom: 0.4rem;
      }
    }
  }
}

.product__description > .info_panel:first-child {
  margin-top: 0;
  margin-bottom: 2em;
}