/* ============================================================
   Study Details Page Styles
   Specific styles for focusgroup-details.html page
   ============================================================ */

   :root {
    /* Colors */
    --study-text-color: #4B465C;
    --study-link-color: #13b5f7;
    --study-bg-white: #fff;
    --study-overlay-bg: rgba(0, 0, 0, 0.5);
    --study-close-hover: #333;
    --study-close-default: #666;

    /* Spacing */
    --study-gap-small: 0.5rem;      /* 8px */
    --study-gap-medium: 0.75rem;    /* 12px */
    --study-gap-large: 1rem;        /* 16px */
    --study-gap-xlarge: 1.5rem;     /* 24px */
    --study-gap-2xlarge: 2rem;      /* 32px */
    --study-gap-3xlarge: 2.5rem;    /* 40px */

    /* Layout */
    --study-left-col-width: 60%;
    --study-right-col-width: 40%;
    --study-border-radius: 0.25rem;      /* 4px */
    --study-modal-radius: 0.5rem;        /* 8px */
    --study-modal-max-width: 43.75rem;   /* 700px */
    --study-card-min-width: 17rem;       /* 272px - fluid grid minimum */

    /* Typography */
    --study-font-size-default: 1rem;     /* 16px */
    --study-font-size-heading: 1.25rem;  /* 20px */
    --study-font-size-modal-h: 1.5rem;   /* 24px */
    --study-font-size-close: 1.75rem;    /* 28px */
    --study-font-size-tablet-h1: 2rem;   /* 32px */
    --study-font-size-desktop-h1: 2.25rem; /* 36px */
    --study-line-height-normal: 1.6;
    --study-line-height-loose: 1.7;
    --study-line-height-mobile: 1.65;

    /* Specific Spacing */
    --study-margin-top-title: 2.75rem;   /* 44px */
    --study-max-height-truncated: 20.625rem; /* 330px */
    --study-modal-margin-bottom: 1.25rem; /* 20px */
  }

  /* Title Section */
  .details-title-wrapper {
    padding: 0 var(--study-gap-medium);
    margin-top: var(--study-margin-top-title);
    margin-bottom: var(--study-gap-xlarge);

    & .heading-text {
      margin-bottom: 0;
    }
  }

  /* Main Content Layout - 60/40 Split */
  .details-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--study-gap-2xlarge);
    padding: 0 var(--study-gap-medium);
    margin-bottom: var(--study-gap-3xlarge);
    position: relative;
  }

  .details-left-column {
    flex: 0 0 var(--study-left-col-width);
    max-width: var(--study-left-col-width);

    & .detail-register {
      display: none;
      width: 100%;
      margin-bottom: var(--study-gap-large);
    }

    & .details-banner {
      margin-top: 0;
      display: flex;

      & img {
        width: 100%;
        height: auto;
        border-radius: var(--study-border-radius);
      }
    }
  }

  .details-right-column {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(var(--study-right-col-width) - var(--study-gap-2xlarge));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & .details-description {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
      margin-top: 0;
      margin-bottom: 0;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--study-gap-3xlarge);
        background: linear-gradient(transparent, var(--study-bg-white));
        pointer-events: none;
      }

      & .item__heading {
        margin-bottom: var(--study-gap-large);
        font-size: var(--study-font-size-heading);
        font-weight: 600;
        color: var(--study-text-color);
      }
    }

    & .description-content {
      font-size: var(--study-font-size-default);
      line-height: var(--study-line-height-normal);
      color: var(--study-text-color);

      &.truncated {
        max-height: var(--study-max-height-truncated);
        overflow: hidden;

        @media (min-width: 768px) and (max-width: 992px) {
          max-height: 6.5rem;
        }

        @media (min-width: 992px) and (max-width: 1200px) {
          max-height: 12rem;
        }

        @media (min-width: 1200px) and (max-width: 1499px) {
          max-height: 15rem;
        }
      }

      & p {
        margin-bottom: var(--study-gap-medium);
      }

      & ol,
      & ul {
        margin-bottom: var(--study-gap-medium);
        padding-left: var(--study-gap-xlarge);
      }

      & li {
        margin-bottom: var(--study-gap-small);
      }
    }
  }

  /* Responsive title sizing */
  @media (min-width: 768px) and (max-width: 1200px) {
    .details-title-wrapper .heading-text {
      font-size: var(--study-font-size-tablet-h1);
    }
  }

  @media (min-width: 1200px) and (max-width: 1440px) {
    .details-title-wrapper .heading-text {
      font-size: var(--study-font-size-desktop-h1);
    }
  }

  /* See More Link */
  .see-more-link {
    flex-shrink: 0;
    display: none;
    color: var(--study-link-color);
    font-weight: 600;
    text-decoration: none;
    margin-top: var(--study-gap-medium);
    margin-bottom: var(--study-gap-large);
    font-size: 1rem;

    &:hover {
      text-decoration: underline;
    }

    @media only screen and (max-width: 1199px) {
      font-size: 0.875rem;
    }

    @media only screen and (max-width: 1100px) {
      font-size: 0.75rem;
    }
  }

  /* Bottom Register Button */
  .details-register-bottom {
    flex-shrink: 0;
    margin-top: auto;

    & .detail-register {
      width: 100%;
    }
  }

  /* Ad Section */
  .details-ad-section {
    padding: 0 var(--study-gap-medium);
    margin-bottom: var(--study-gap-3xlarge);
  }

  /* Other Focus Groups Section */
  .other-focus-groups-section {
    padding: 0 var(--study-gap-medium);
  }

  .other-focus-groups-grid .studies {
    max-width: 100%;
  }

  .view-all-wrapper {
    text-align: center;
    margin-top: var(--study-gap-2xlarge);
    margin-bottom: var(--study-gap-3xlarge);
  }

  /* Description Modal */
  .description-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--study-overlay-bg);
    z-index: 101;

    &.overlay_active {
      display: block;
    }
  }

  .description-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: var(--study-modal-max-width);
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--study-gap-3xlarge);
    background-color: var(--study-bg-white);
    border-radius: var(--study-modal-radius);
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.15);
    z-index: 102;

    &.modal_active {
      display: block;
    }

    & .modal-close {
      position: absolute;
      top: var(--study-gap-large);
      right: var(--study-gap-large);
      background: none;
      border: none;
      font-size: var(--study-font-size-close);
      cursor: pointer;
      color: var(--study-close-default);
      line-height: 1;
      padding: 0;
      width: var(--study-gap-2xlarge);
      height: var(--study-gap-2xlarge);

      &:hover {
        color: var(--study-close-hover);
      }
    }

    & .item__heading {
      margin-bottom: var(--study-modal-margin-bottom);
      font-size: var(--study-font-size-modal-h);
      font-weight: 600;
      color: var(--study-text-color);
    }
  }

  .modal-description-content {
    font-size: var(--study-font-size-default);
    line-height: var(--study-line-height-loose);
    color: var(--study-text-color);

    & p {
      margin-bottom: var(--study-gap-large);
    }

    & ol,
    & ul {
      margin-bottom: var(--study-gap-large);
      padding-left: var(--study-gap-xlarge);
    }

    & li {
      margin-bottom: var(--study-gap-small);
    }
  }

  /* Responsive Layout - Tablet */
  @media only screen and (max-width: 991px) {
    .details-left-column {
      flex: 0 0 55%;
      max-width: 55%;
    }

    .details-right-column {
      width: calc(45% - var(--study-gap-2xlarge));
    }
  }

  /* Responsive Layout - Mobile */
  @media only screen and (max-width: 767px) {
    .details-content-wrapper {
      flex-direction: column;
      gap: var(--study-gap-xlarge);
    }

    .details-left-column,
    .details-right-column {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .details-left-column .detail-register {
      display: inline-block;
    }

    .details-right-column {
      position: static;
      width: 100%;
      overflow: visible;
    }

    .details-title-wrapper .heading-text {
      font-size: 1.5rem;
    }

    .details-right-column {
      & .details-description .item__heading {
        font-size: 1.125rem;
      }

      & .description-content p {
        font-size: 0.875rem !important;
        line-height: var(--study-line-height-mobile);
      }
    }

    .description-modal {
      padding: var(--study-gap-xlarge);
      max-height: 90vh;

      & .modal-close {
        top: var(--study-gap-medium);
        right: var(--study-gap-medium);
      }

      & .item__heading {
        font-size: 1.25rem;
      }
    }

    .modal-description-content p {
      font-size: 0.875rem !important;
      line-height: var(--study-line-height-mobile);
    }
  }

  /* Other Focus Groups Grid - Fluid Layout (CSS Grid auto-fill) */
  .other-focus-groups-grid .studies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--study-card-min-width)), 1fr));
    gap: var(--study-gap-xlarge);
    align-items: stretch;

    & > div {
      display: grid;
    }

    & > div > a {
      display: grid;
    }

    & .study-pannel {
      width: 100%;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, max-content) 1fr;
      overflow: hidden !important;
    }

    & .study-pannel > .view {
      align-self: end;
    }

    & .study-image {
      width: 100%;
      height: auto;
    }

    & > div > .study-pannel {
      display: block;
      position: relative;
      min-height: 25rem;
      overflow: hidden !important;
    }

    & .ad-pannel {
      position: absolute;
      inset: 0;
      width: auto;
      height: auto;
      overflow: hidden !important;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: inherit;
    }

    & .ad-pannel ins {
      max-width: min(18.75rem, 100%);
    }
  }