/* ==========================================================================
   ESPERIENZE (Experiences) PAGE
   Casale Isidoro
   ========================================================================== */

/* --------------------------------------------------------------------------
   Experience Overview Grid
   -------------------------------------------------------------------------- */

.esperienze-overview {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.esperienze-overview__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
}

/* Section labels use shared .section__label from main.css */

.esperienze-overview__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.esperienze-overview__text {
  font-size: 1rem;
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Experience Grid (2x3 or 3-col) */
.esperienze-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .esperienze-overview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .esperienze-overview__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Featured experience layout (larger first item) */
@media (min-width: 1024px) {
  .esperienze-overview__grid--featured .experience-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .esperienze-overview__grid--featured .experience-card:first-child .experience-card__image {
    aspect-ratio: 4 / 3;
  }

  .esperienze-overview__grid--featured .experience-card:first-child .experience-card__description {
    -webkit-line-clamp: 5;
  }
}

/* Category filters */
.esperienze-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

/* Esperienze filter buttons use .filter-pill from main.css */

/* --------------------------------------------------------------------------
   Single Experience Page
   -------------------------------------------------------------------------- */

.experience-single {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.experience-single__header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto var(--space-xl);
}

/* .experience-single__category uses shared .section__label pattern */
.experience-single__category {
  display: inline-block;
}

.experience-single__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.experience-single__intro {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Main content layout */
.experience-single__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.experience-single__content {
  /* Main text content */
}

.experience-single__content p {
  font-size: 1rem;
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 1.2em;
}

.experience-single__content h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* Sidebar */
.experience-single__sidebar {
  /* sidebar with quick info */
}

@media (min-width: 1024px) {
  .experience-single__body {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Experience Info Widget (Sidebar)
   -------------------------------------------------------------------------- */

.experience-info {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.experience-info__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.experience-info__list {
  list-style: none;
  margin-bottom: var(--space-md);
}

.experience-info__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7em 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-small);
}

.experience-info__item:last-child {
  border-bottom: none;
}

.experience-info__icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

.experience-info__label {
  font-weight: var(--fw-light);
  color: var(--text-muted);
  min-width: 80px;
}

.experience-info__value {
  font-weight: var(--fw-regular);
  color: var(--text-primary);
}

.experience-info__cta {
  width: 100%;
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Experience Image Gallery
   -------------------------------------------------------------------------- */

.experience-single__gallery {
  margin: var(--space-xl) 0;
}

.experience-single__gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 768px) {
  .experience-single__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .experience-single__gallery-grid .gallery__item:first-child {
    grid-column: span 2;
    aspect-ratio: 21 / 9;
  }
}

/* --------------------------------------------------------------------------
   Related Experiences
   -------------------------------------------------------------------------- */

.related-experiences {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: var(--bg-secondary);
}

.related-experiences__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.related-experiences__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
}

.related-experiences__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.related-experiences__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .related-experiences__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .related-experiences__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Experience Highlights (Icon Grid on Overview)
   -------------------------------------------------------------------------- */

.esperienze-highlights {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: var(--bg-secondary);
}

.esperienze-highlights__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.esperienze-highlight {
  padding: var(--space-md);
}

.esperienze-highlight__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-sm);
  color: var(--accent);
}

.esperienze-highlight__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.esperienze-highlight__text {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .esperienze-highlights__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .esperienze-highlights__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Experience Split Layout (testo sx + immagine dx)
   -------------------------------------------------------------------------- */

.exp-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.exp-split__text {
  order: 1;
}

.exp-split__image {
  order: 2;
}

.exp-split__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.exp-split__description {
  font-size: 1.05rem;
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.exp-split__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .exp-split__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .exp-split--reverse .exp-split__text {
    order: 2;
  }

  .exp-split--reverse .exp-split__image {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   Experience Poster (Locandina)
   -------------------------------------------------------------------------- */

.experience-poster {
  display: block;
  max-width: min(520px, 100%);
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-card);
}

@media (min-width: 768px) {
  .experience-poster {
    max-width: 480px;
  }
}