/* ========================
   Capture Programme Section
 Section styles
   ======================== */

.capture-program-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
}
/* ========================
   Header Section
   ======================== */

.capture-programme-section .capture-programme-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}

/* ========================
   Professional Section
   ======================== */

.professional-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* ========================
   Professional Card
   ======================== */

.professional-card {
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: white;
}

.image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
}

.professional-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-bg {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
  background: #000;
}

.video-bg .video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-bg iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--bs-black);
}

/* Video Wrap - Container for video with proper aspect ratio */
.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
  background: #000;
  /* height: 20.625rem; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Capture Programme Video Container - Full width, auto height */
.capture-programme-video-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
}

.capture-programme-video-container .video-wrapper {
  width: 100%;
  height: auto;
}

.capture-programme-video-container .video-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  background-color: var(--bs-black);
  display: block;
}

/* ========================
   Professional Content
   ======================== */

.professional-content {
  background: var(--bs-primary-100);
  padding: var(--space-8) var(--space-10);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  border-top: 0.125rem solid var(--bs-success);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.professional-title {
  margin: 0;
  font-size: var(--font-size-h4-fluid);
  font-weight: var(--font-weight-semibold);
  color: var(--bs-primary-600);
  line-height: var(--line-height-heading);
}

.professional-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--bs-primary-800);
  line-height: var(--line-height-relaxed);
}

/* ========================
   Professional Listing
   ======================== */

.professional-listing {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.professional-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.professional-item::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  margin-top: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 13.3837L5.625 10.2581L6.50813 9.375L8.75 11.6163L13.4906 6.875L14.375 7.75937L8.75 13.3837Z' fill='currentColor'/%3E%3Cpath d='M10 1.25C8.26942 1.25 6.57769 1.76318 5.13876 2.72464C3.69983 3.6861 2.57832 5.05267 1.91606 6.65152C1.25379 8.25037 1.08051 10.0097 1.41813 11.707C1.75575 13.4044 2.58911 14.9635 3.81282 16.1872C5.03653 17.4109 6.59563 18.2442 8.29296 18.5819C9.9903 18.9195 11.7496 18.7462 13.3485 18.0839C14.9473 17.4217 16.3139 16.3002 17.2754 14.8612C18.2368 13.4223 18.75 11.7306 18.75 10C18.75 7.67936 17.8281 5.45376 16.1872 3.81282C14.5462 2.17187 12.3206 1.25 10 1.25ZM10 17.5C8.51664 17.5 7.0666 17.0601 5.83323 16.236C4.59986 15.4119 3.63856 14.2406 3.07091 12.8701C2.50325 11.4997 2.35473 9.99168 2.64411 8.53682C2.9335 7.08197 3.64781 5.74559 4.6967 4.6967C5.7456 3.64781 7.08197 2.9335 8.53683 2.64411C9.99168 2.35472 11.4997 2.50325 12.8701 3.0709C14.2406 3.63856 15.4119 4.59985 16.236 5.83322C17.0601 7.06659 17.5 8.51664 17.5 10C17.5 11.9891 16.7098 13.8968 15.3033 15.3033C13.8968 16.7098 11.9891 17.5 10 17.5Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 13.3837L5.625 10.2581L6.50813 9.375L8.75 11.6163L13.4906 6.875L14.375 7.75937L8.75 13.3837Z' fill='currentColor'/%3E%3Cpath d='M10 1.25C8.26942 1.25 6.57769 1.76318 5.13876 2.72464C3.69983 3.6861 2.57832 5.05267 1.91606 6.65152C1.25379 8.25037 1.08051 10.0097 1.41813 11.707C1.75575 13.4044 2.58911 14.9635 3.81282 16.1872C5.03653 17.4109 6.59563 18.2442 8.29296 18.5819C9.9903 18.9195 11.7496 18.7462 13.3485 18.0839C14.9473 17.4217 16.3139 16.3002 17.2754 14.8612C18.2368 13.4223 18.75 11.7306 18.75 10C18.75 7.67936 17.8281 5.45376 16.1872 3.81282C14.5462 2.17187 12.3206 1.25 10 1.25ZM10 17.5C8.51664 17.5 7.0666 17.0601 5.83323 16.236C4.59986 15.4119 3.63856 14.2406 3.07091 12.8701C2.50325 11.4997 2.35473 9.99168 2.64411 8.53682C2.9335 7.08197 3.64781 5.74559 4.6967 4.6967C5.7456 3.64781 7.08197 2.9335 8.53683 2.64411C9.99168 2.35472 11.4997 2.50325 12.8701 3.0709C14.2406 3.63856 15.4119 4.59985 16.236 5.83322C17.0601 7.06659 17.5 8.51664 17.5 10C17.5 11.9891 16.7098 13.8968 15.3033 15.3033C13.8968 16.7098 11.9891 17.5 10 17.5Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--bs-primary-800);
}

.professional-name {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--bs-primary-800);
  line-height: var(--line-height-relaxed);
}

/* ========================
   Form Section
   ======================== */

.form-section {
  width: 100%;
}

/* ========================
   RESPONSIVE DESIGN
   ======================== */

/* X-Small devices (portrait phones, less than 576px) - Default/Base Styles */
.capture-program-container {
  gap: var(--space-13);
}

.capture-programme-section .capture-programme-section-header {
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}

.professional-section {
  gap: var(--space-7);
}

.professional-content {
  padding: var(--space-8) var(--space-10);
}

.professional-name {
  font-size: var(--font-size-xs);
}

.professional-item {
  gap: var(--space-3);
}

.professional-item::before {
  width: 0.875rem;
  height: 0.875rem;
  min-width: 0.875rem;
  margin-top: 0.25rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .capture-program-container {
    gap: var(--space-15);
  }

  .capture-programme-section .capture-programme-section-header {
    gap: var(--space-5);
    margin-bottom: var(--space-10);
  }

  .professional-section {
    gap: var(--space-8);
  }

  .professional-content {
    padding: var(--space-9) var(--space-12);
  }

  .professional-item {
    gap: var(--space-3);
  }

  .professional-item::before {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin-top: 0.0625rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .capture-program-container {
    gap: var(--space-17);
  }

  .capture-programme-section .capture-programme-section-header {
    gap: var(--space-6);
    margin-bottom: var(--space-11);
  }

  .professional-section {
    gap: var(--space-9);
  }

  .professional-content {
    padding: var(--space-10) var(--space-14);
  }

  .professional-item {
    gap: var(--space-4);
  }

  .professional-item::before {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .capture-program-container {
    gap: var(--space-19);
  }

  .capture-programme-section .capture-programme-section-header {
    gap: var(--space-7);
    margin-bottom: var(--space-12);
  }

  .professional-section {
    gap: var(--space-10);
  }

  .professional-content {
    padding: var(--space-11) var(--space-16);
    background: var(--bs-white);
  }
  .professional-subtitle {
    color: var(--neutral-400);
  }

  .professional-item::before {
    background-color: var(--neutral-400);
  }

  .professional-name {
    color: var(--neutral-400);
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .capture-program-container {
    gap: var(--space-21);
  }

  .capture-programme-section .capture-programme-section-header {
    gap: var(--space-8);
    margin-bottom: var(--space-13);
  }
  .capture-program-heading-section .text-description {
    font-size: var(--font-size-18);
  }

  .professional-section {
    gap: var(--space-11);
  }

  .professional-content {
    padding: var(--space-12) var(--space-18);
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* Inherits from 1200px and up */
}

/* XXX-Large devices (1600px and up) */
@media (min-width: 1600px) {
  /* Inherits from 1400px and up */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .professional-card {
    transition: none;
  }
}
