/* ====================================
   Work History Styles
==================================== */

/* Screenplay Section */

.screenplay-container {
    width: var(--max-width-md, 60rem);
    padding: var(--spacing-lg, 2rem);
    margin: 0 auto;
    text-align: center;
}
  
.screenplay-heading {
    font-size: var(--font-size-xxxl, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    margin-bottom: var(--spacing-lg, 2rem);
}

.screenplay-description {
    font-size: var(--font-size-md, 1rem);
    margin-bottom: var(--spacing-lg, 2rem);
    text-align: left;
}
  
.screenplay-subheading {
    font-size: var(--font-size-xxl, 2rem);
    font-weight: var(--font-weight-bold, 700);
    margin: var(--spacing-lg, 2rem) 0;
    text-align: left;
}
  
.screenplay-section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg, 2rem);
    justify-content: center;
    margin-bottom: var(--spacing-lg, 2rem);
}

.screenplay-item {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
}
  
.screenplay-image {
    width: 100%;
    max-height: var(--max-width-xs, 20rem);
    object-fit: contain;
    margin-bottom: var(--spacing-sm, 1rem);
}
  
.screenplay-title {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    margin: var(--spacing-xs, 0.5rem) 0;
}
  
.screenplay-type {
    font-size: var(--font-size-md, 1rem);
    color: var(--color-secondary, #666);
    margin: var(--spacing-xs, 0.5rem) 0;
}
  
.screenplay-length {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-secondary, #666);
    margin: var(--spacing-xs, 0.5rem) 0;
}

/* ====================================
   Work History Styles - Responsive
==================================== */

@media (max-width: 1024px) {
    .screenplay-container {
      width: 100%; /* Use full width for medium-sized screens */
      padding: var(--spacing-md, 1.5rem); /* Reduce padding */
    }
  
    .screenplay-heading {
      font-size: var(--font-size-xxl, 2rem); /* Scale down heading size */
    }
  
    .screenplay-description {
      font-size: var(--font-size-sm, 0.875rem); /* Smaller text */
      text-align: center; /* Align text center for smaller screens */
      margin-bottom: var(--spacing-md, 1.5rem);
    }
  
    .screenplay-subheading {
      font-size: var(--font-size-xl, 1.5rem); /* Smaller subheading */
      text-align: center; /* Center subheadings */
      margin: var(--spacing-md, 1.5rem) 0;
    }
  
    .screenplay-section {
      gap: var(--spacing-md, 1.5rem); /* Reduce gap between items */
    }
  
    .screenplay-item {
      flex: 1 1 30rem; /* Allow more width for medium screens */
      padding: var(--spacing-sm, 1rem);
    }
  
    .screenplay-title {
      font-size: var(--font-size-md, 1rem); /* Scale down title font */
    }
  }
  
  @media (max-width: 767px) {
    .screenplay-container {
      padding: var(--spacing-sm, 1rem); /* Minimal padding for mobile */
    }
  
    .screenplay-heading {
      font-size: var(--font-size-xl, 1.5rem); /* Smaller heading size */
      margin-bottom: var(--spacing-sm, 1rem);
    }
  
    .screenplay-description {
      font-size: var(--font-size-sm, 0.875rem);
      margin-bottom: var(--spacing-sm, 1rem);
    }
  
    .screenplay-subheading {
      font-size: var(--font-size-lg, 1.25rem); /* Smaller subheading */
      text-align: center;
      margin: var(--spacing-sm, 1rem) 0;
    }
  
    .screenplay-section {
      flex-direction: column; /* Stack items vertically */
      gap: var(--spacing-sm, 1rem); /* Smaller gap for mobile */
      margin-bottom: var(--spacing-sm, 1rem);
    }
  
    .screenplay-item {
      flex: 1 1 auto; /* Allow flexibility for stacked layout */
      text-align: left; /* Align text for better readability */
      padding: var(--spacing-xs, 0.5rem); /* Compact padding */
    }
  
    .screenplay-image {
      width: 100%;
      max-height: var(--max-width-xs, 15rem); /* Smaller images */
      margin-bottom: var(--spacing-xs, 0.5rem);
    }
  
    .screenplay-title {
      font-size: var(--font-size-md, 1rem); /* Adjust title font size */
    }
  
    .screenplay-type, 
    .screenplay-length {
      font-size: var(--font-size-xs, 0.75rem); /* Smaller secondary text */
    }
  }