/**
 * @file
 * User profile styles for the republica FL theme.
 */

/* ========================================================================
   Hide page title on user profile pages (rendered inside template)
   ======================================================================== */

.page-user-profile .block-page-title-block {
  display: none;
}

.page-user-profile #main-content #block-rp-fl-content {
  border-top: 1px solid var(--color-black);
  padding-top: 4rem;
}
 
.page-user-profile .layout-content {
  margin-top: 0;
}

/* ========================================================================
   User profile — Two-column layout
   ======================================================================== */
.page-user-profile .container {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 1rem;
}
.user-profile {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 3rem;
}

/* --- Photo column --- */

.user-profile__photo .field--name-field-photo {
  line-height: 0;
}

.user-profile__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--button-radius);
}

.user-profile__credit {
  font-family: var(--font-body);
  font-size: calc(var(--font-size-expand) * 0.85);
  line-height: var(--line-height-expand);
  color: var(--color-grey-dark);
  margin: 0.5rem 0 0;
}

.field.field--name-field-photo-credit.field--type-string.field--label-inline.clearfix {
    display: flex;
    gap: 0.5rem;
}

.field--name-field-photo-credit .field__label:after {
    content: ':';
}

/* --- Content column --- */

.user-profile__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-catch);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--line-height-catch);
  margin: 0 0 0.25rem;
}

.user-profile__pronouns {
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: super;
}

.user-profile__position {
  font-family: var(--font-body);
  font-size: var(--font-size-catch);
  text-transform: uppercase;
  line-height: var(--line-height-catch);
  margin: 0.25rem 0 1.5rem;
}

.user-profile__organization {
  margin-bottom: 1.5rem;
}

.user-profile__organization .field {
  display: inline;
}

.user-profile__organization a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
  font-weight: 700;
}

.user-profile__organization a:hover {
  text-decoration: underline;
}

/* --- Bio --- */

.user-profile__bio {
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  margin-bottom: 1.5rem;
}

.user-profile__bio .field {
  display: block;
}

.user-profile__bio p {
  margin: 0 0 1rem;
}

.user-profile__bio p:last-child {
  margin-bottom: 0;
}

/* --- Links --- */

.user-profile__links {
  margin-top: 1.5rem;
}

.user-profile__links .field__item {
  margin-bottom: 0.35rem;
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
}

.user-profile__links .field__item a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
}

.user-profile__links .field__item a::before {
  content: "\2192\00a0";
}

.user-profile__links .field__item a:hover {
  text-decoration: underline;
}

/* ========================================================================
   User profile — Compact (card grid, e.g. speakers list)
   ======================================================================== */

.user-profile--compact {
  display: block;
}

.user-profile--compact .user-profile__photo-link {
  display: block;
  line-height: 0;
  margin-bottom: 0.75rem;
}

.user-profile--compact .user-profile__photo-link img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.user-profile--compact .user-profile__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-standard);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--line-height-standard);
  margin: 0;
}

.user-profile--compact .user-profile__name a {
  color: var(--color-text);
  text-decoration: none;
}

.user-profile--compact .user-profile__name a:hover {
  text-decoration: underline;
}

.user-profile--compact .user-profile__position {
  font-family: var(--font-body);
  font-size: var(--font-size-standard);
  text-transform: uppercase;
  font-weight: 400;
  line-height: var(--line-height-standard);
  margin: 0.1rem 0 0;
  hyphens: auto;
}

/* --- Speakers grid (Views grid override) --- */

.views-view-grid.cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.views-view-grid.cols-5 .views-row {
  display: contents;
}

.views-view-grid.cols-5 .views-col {
  width: auto !important;
}

/* Hide credit and other details in compact grid */
.user-profile--compact .user-profile__credit,
.user-profile--compact .user-profile__bio,
.user-profile--compact .user-profile__links,
.user-profile--compact .user-profile__pronouns {
  display: none;
}

.user-profile--compact .user-profile__organization a {
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
  font-weight: 400;
  font-style: italic;
}


.user-profile--compact .user-profile__organization {
    margin-bottom: 1.5rem;
    margin-top: .5rem;
}

/* ========================================================================
   User profile — Sessions grid (sessions-of-speaker view on profile page)
   ======================================================================== */

.view--sessions-of-speaker .session-ticket {
  height: 100%;
}

.view--sessions-of-speaker .session-ticket__link {
  height: 100%;
}

.view--sessions-of-speaker .views-row {
  min-width: 0;
}

.view--sessions-of-speaker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.view--sessions-of-speaker > header,
.view--sessions-of-speaker > nav,
.view--sessions-of-speaker > .contextual,
.view--sessions-of-speaker > .view-header {
  grid-column: 1 / -1;
}

#block-rp-fl-views-block-sessions-of-speaker-block-2 {
  margin-top: 1.5rem;
}

@media (max-width: 1023px) {
  .view--sessions-of-speaker {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .view--sessions-of-speaker {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ========================================================================
   User profile — Responsive
   ======================================================================== */

@media (max-width: 767px) {
  .user-profile {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .user-profile__name {
    font-size: var(--font-size-standard);
    line-height: var(--line-height-standard);
  }

  .user-profile__position {
    font-size: var(--font-size-expand);
    line-height: var(--line-height-expand);
  }

  .views-view-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .views-view-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* ========================================================================
   Featured speakers carousel
   ======================================================================== */

.embla.featured-speakers-carousel {
  --slide-size: 80%;
  --slide-spacing: 2rem;
}

.featured-speakers-carousel .user-profile {
  margin-bottom: 1rem;
}

.view--featured-speakers img,
.teammitglied img,
.view--speakers img,
.view--speakers-of-taxonomy img,
.session__speakers-grid img {
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .embla.featured-speakers-carousel {
    --slide-size: 33.333%;
  }
}

@media (min-width: 1024px) {
  .embla.featured-speakers-carousel {
    --slide-size: 22%;
  }
}

/* The block itself is the positioning context for the absolutely placed
   .more-link. Use a 3-class compound selector (all three classes sit on
   the same element) to out-specify blocks.css's
   `.views-element-container.contextual-region { position: static }`,
   which would otherwise win — Drupal loads blocks.css after user.css in
   the aggregated CSS, and both selectors have specificity 0,2,0.
   Attribute selector covers both block_1 (startseite) and block_2
   (taxonomy term specials) without re-listing every display. */
[class*="block-views-blockfeatured-speakers-block-"].views-element-container.contextual-region,
[class*="block-views-blockfeatured-speakers-block-"].views-element-container {
  position: relative;
  max-width: var(--layout-width);
  margin: var(--block-spacing) auto 0 auto;
  padding: 0 var(--block-padding) 0 var(--block-padding);
  margin-bottom: 3rem;
}

/* Neutralise the inner .contextual-region wrappers Drupal adds inside
   .block__content when logged in. Without this they become the nearest
   positioned ancestor and hijack the .more-link offset. */
[class*="block-views-blockfeatured-speakers-block-"] .contextual-region {
  position: static;
}

[class*="block-views-blockfeatured-speakers-block-"] .more-link {
  position: absolute;
  top: 0;
  left: 29rem;
  margin: 0;
  line-height: var(--line-height-section-header);
}

@media (max-width: 1280px) {
  [class*="block-views-blockfeatured-speakers-block-"] .more-link {
    left: 26rem; 
  }
}

@media (max-width: 768px) {
    [class*="block-views-blockfeatured-speakers-block-"] .more-link {
      top: auto;
      left: 1rem;
      bottom: 0;
    }
    [class*="block-views-blockfeatured-speakers-block-"] {
        margin-left:0;
    }
    .embla__arrow {
        display: none;
    }
}

/* Title during registration process */
.x10-registration-workflow #block-rp-fl-page-title {
  margin-left: 1rem;
}