#speaker-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  overflow: hidden;
}

@media (max-width: 736px) {
  #speaker-content {
    display: flex;
    flex-direction: column;
    max-height: none;
    gap: 1rem;
  }
}

#speaker-presentations details {
  scroll-margin-top: 3.5em;
  padding: 0;
}

#speaker-profile-image-container {
  grid-column: 1 / span 2;
}

#speaker-profile-image-container > p {
  padding: 1rem;
}

#speaker-profile-image-container {
  height: 100%;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
}

#speaker-profile-image-container > h3 {
  background: var(--theme-secondary);
  color: white;
  margin: 0;
}

#speaker-profile-image-container img {
  max-width: 100%;
  object-fit: scale-down;
}

#speaker-info {
  grid-column: 3 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  height: 100%;
  max-height: 60vh;
}

#speaker-gallery {
  padding: 0 20px;
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: 33%;
  justify-self: end;
  display: flex;
  align-items: center;
  max-height: 40vh;
  overflow: auto;
  white-space: nowrap;
  gap: 1rem;

  background-image: linear-gradient(to right, white, white),
  linear-gradient(to right, white, white),
    /* shadow covers */ linear-gradient(to right, rgba(0, 0, 0, .50), rgba(255, 255, 255, 0)),
  linear-gradient(to left, rgba(0, 0, 0, .50), rgba(255, 255, 255, 0));

  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
  background-origin: border-box;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
}

.gallery-image {
  height: 80%;
  object-fit: scale-down;
  border-radius: 2px;
  padding-right: 1rem;
}

.gallery-image-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.presentation-media {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@container (max-width: 768px) {
  .presentation-media {
    grid-template-columns: 1fr;
  }
}

.pdf-embed {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;

  & object {
    height: 100%;
    width: 100%;
  }
}

#speaker-nav-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.back-link {
  text-decoration: none;
  color: #666;
  font-size: 0.9rem;
}

.back-link:hover {
  color: #000;
}

.speaker-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.speaker-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}


#speaker-description {
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-shrink: 1;
  text-align: justify;
  font-style: italic;
}

#speaker-presentations-wrapper {
  grid-column: 3 / span 2;
  max-height: 100%;
}

/* Sections */
#speaker-presentations {
  height: 0;
  min-height: 100%;
  grid-column: 3 / span 2;
  overflow-y: auto;
  text-align: start;
}

@media(max-width: 736px) {
  #speaker-presentations {
    grid-column: none;
    height: fit-content;
  }
}

/* Topics */
#topic-list {
  list-style: none;
  padding: 0;
}

#topic-list summary {
  cursor: pointer;
  padding: 0 2rem;
}

#topic-list li {
  padding: 0.5rem 0;
  position: relative;
}

/* Conference Tags */
.conference-tags {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.conference-logo {
  inline-size: 200px;
  object-fit: contain;
}

/* Talk Cards */
.talks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.talk-card {
  padding: 1.5rem;
}

.talk-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.talk-abstract {
  color: #666;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.talk-video-link {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Navigation */
#speaker-nav-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid #e0e0e0;
}

#book-speaker-button {
  padding: 1rem;
  text-transform: uppercase;
  font-weight: bold;
  background: none;
  border: 1px solid var(--theme-secondary);
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
}

#book-speaker-button:hover {
  /* placeholder: goal is feedback that you can click a tile */
  cursor: pointer;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
  transform: translate(0, -5px) scale(1.1);
  z-index: 100;
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}


/* Responsive */
@media (max-width: 768px) {

  .speaker-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .speaker-profile-image {
    max-width: 250px;
    margin: 0 auto;
  }

  .talks-grid {
    grid-template-columns: 1fr;
  }

  #speaker-nav-footer {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Light styling for presentation */
.presentation-details-container {
  font-size: 16px;
  padding: 0 2rem;
}

@media(max-width: 736px) {
  .presentation-details-container {
    padding: 0;
  }

}

summary {
  /* Pin the custom marker to the container */
  position: relative;
  /* Register summary as an anchor element */
  anchor-name: --summary;

  &::marker {
    content: "";
  }


  &::before,
  &::after {
    /* Custom marker dimensions */
    content: "";
    border-block-start: 3px solid var(--theme-secondary);
    height: 0;
    width: 1rem;

    /* Positions the lines */
    inset-block-start: 50%;
    inset-inline-start: 0;

    /* Anchor the shape to the summary */
    position: absolute;
    position-anchor: --summary;
    position-area: center left;
  }

  /* Rotate just the ::after line to create a "+"" shape */

  &::after {
    transform: rotate(90deg);
  }
}


details p {
  text-align: justify;
  font-size: 16px;
}

/* Rotate the line when open */
details[open] summary::after {
  transform: rotate(0deg);
}

/* Bold title when open */
.presentation-summary:hover,
details[open] summary {
  font-weight: 600;
  color: var(--theme-primary);
}

/* Set your aspect ratio */
.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}

.video-container iframe,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

/* And set the max-width of the parent element */
.video-wrap {
  width: 100%;
  max-width: 600px;
}