/*--------------------------------------------------------------
  Speakers Collective - Card Overrides
  
  Speaker-specific styles that extend the shared amfm-resources-card
  pattern from amfm-resources.css.
  
  Used by [speakers_collective] shortcode.
  
  @since 2026-02-12
--------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
   Speaker Image (square portrait instead of 2:3 book cover)
   ----------------------------------------------------------------------------- */
.amfm-speaker-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--amfm-radius-md, 8px);
}

.amfm-speaker-image img {
  border-radius: var(--amfm-radius-md, 8px);
}

/* -----------------------------------------------------------------------------
   Speaker Grid (4 columns default, matching the old layout)
   ----------------------------------------------------------------------------- */
.amfm-speakers-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Large desktop (1500px+ viewport) */
@media (min-width: 1500px) {
  .amfm-speakers-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   Speaker Modal - Image (square portrait, not book cover)
   ----------------------------------------------------------------------------- */
.amfm-speaker-modal {
  grid-template-columns: 180px 1fr;
}

.amfm-speaker-modal-image img {
  width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--amfm-radius-md, 8px);
}

/* -----------------------------------------------------------------------------
   Speaker Modal - Divider (explicit separator between name and content)
   ----------------------------------------------------------------------------- */
.amfm-speaker-modal-divider {
  height: 1px;
  background-color: var(--amfm-border-secondary, #e9eaeb);
  margin: var(--amfm-spacing-xl, 16px) 0;
}

/* Override the inherited :first-of-type border from shared modal styles */
.amfm-speaker-modal .modal-text-content > p:first-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Speaker Modal - Topics
   ----------------------------------------------------------------------------- */
.amfm-speaker-topics-label {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 600;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-primary, #181d27);
  margin: 0 0 var(--amfm-spacing-md, 8px) 0;
}

.amfm-speaker-topics {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 400;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-secondary, #414651);
  margin: 0 0 var(--amfm-spacing-xl, 16px) 0;
}

/* -----------------------------------------------------------------------------
   Speaker Modal - Description
   ----------------------------------------------------------------------------- */
.amfm-speaker-description {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 400;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-secondary, #414651);
  margin: 0 0 var(--amfm-spacing-2xl, 20px) 0;
}

/* -----------------------------------------------------------------------------
   Speaker Modal - Inquiry Button
   ----------------------------------------------------------------------------- */
.amfm-speaker-inquiry-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--amfm-spacing-md, 8px);
  padding: 10px var(--amfm-spacing-xl, 16px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 600;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-white, #ffffff);
  background-color: var(--amfm-brand-500, #c07858);
  border: none;
  border-radius: var(--amfm-radius-md, 8px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--amfm-transition-fast, 0.15s ease);
}

.amfm-speaker-inquiry-btn:hover {
  background-color: var(--amfm-brand-700, #8f5236);
  color: var(--amfm-text-white, #ffffff);
}

.amfm-speaker-inquiry-btn:focus-visible {
  outline: 2px solid var(--amfm-brand-500, #c07858);
  outline-offset: 2px;
}

.amfm-speaker-inquiry-btn svg {
  width: var(--amfm-icon-sm, 16px);
  height: var(--amfm-icon-sm, 16px);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Responsive: Medium (< 1200px)
   ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .amfm-speakers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Mobile nav (< 800px)
   ----------------------------------------------------------------------------- */
@media (max-width: 799px) {
  .amfm-speakers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Small mobile (< 600px)
   ----------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .amfm-speakers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .amfm-speaker-modal {
    grid-template-columns: 1fr;
  }

  .amfm-speaker-modal-image {
    display: flex;
    justify-content: center;
  }

  .amfm-speaker-modal-image img {
    width: 140px;
    height: 140px;
  }
}