/*FEATURED IMAGE / BANNER */
.experience-single__banner {
  width: 100%;
  /* margin-bottom: 80px;     */
  overflow: hidden;
}

/* Desktop: banner stays within container flow */
@media (min-width: 768px) {
  .experience-single__banner {
    max-width: var(--max-container);
    width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
  }
}

.experience-single__banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 640;
  object-fit: contain;
  display: block;
}

/* EVENT DETAILS CARD BLOCK */
.experience-single__details-box {
  display: grid;
  grid-template-columns: 1fr 363px;
  gap: 64px;                        
  background-color: var(--al-white);
  /* padding-bottom: 48px; */
  align-items: start;
}



/* LEFT COLUMN INFO & TYPOGRAPHY */
.experience-single__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* max-width: 66.641%; */
  width: 100%;
}

/* "EVENT" Tag Badge */
.experience-single__tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.experience-single__tag {
  background-color: var(--al-green); 
  color: var(--al-white);
  margin-bottom: 0px;              
}

.experience-single__title {                 
  color: var(--al-green);                 
  margin-bottom: 16px;      
}

.experience-single__description {
  margin-bottom: 48px;
}

.experience-single__description p {
  font-family: var(--font-regular);   
  font-size: var(--font-size-main);
  line-height: var(--line-height-main);
  color: var(--al-black);
}

/*METADATA ROW & COLUMNS (Date/Time & Location) */
.experience-single__meta-row {
  display: flex;
  gap: 48px;
  padding-bottom: 48px;
}

.experience-single__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  /* flex: 1; */
}

.experience-single__meta-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.experience-single__meta-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.experience-single__meta-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Labels like "DATE & TIME" */
.experience-single__meta-label {
  font-family: var(--font-bold);          
  font-size: var(--font-size-large);  
  line-height: var(--line-height-large);    
  color: var(--al-green);    
  text-transform: uppercase;             
}

/* Details values - top (bold, e.g. "March 22, 2026", "Acción Latina Cultural Center") */
.experience-single__meta-val-top {
  font-family: var(--font-bold);    
  font-size: var(--font-size-medium);       
  line-height: var(--line-height-medium);
  color: var(--al-black);
  display: block;
}

/* Details values - bottom (regular, e.g. "6:30 PM - 8:30 PM", "– San Francisco, CA") */
.experience-single__meta-val-bottom {
  font-family: var(--font-regular);
  font-size: var(--font-size-medium);       
  line-height: var(--line-height-medium);
  color: var(--al-black);
  display: block;
  margin-top: -16px;
}

/* RIGHT COLUMN - GREY TICKET BOX */
.experience-single__ticket-col {
  width: 100%;
}

.experience-single__ticket-box {
  background-color: var(--al-light-grey);             
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 44px;                         
  width: 100%;
  padding: 42px 33px 0px 32px;
}

.experience-single__ticket-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
}

.experience-single__ticket-label {
  font-family: var(--font-regular);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
  color: var(--al-black);
  /* margin-bottom: 4px; */
}

.experience-single__ticket-price {
  font-family: var(--font-regular);
  font-size: var(--font-size-large);
  line-height: var(--line-height-large);
  color: var(--al-black);
  white-space: nowrap;
}

.experience-single__ticket-price span {
  font-family: var(--font-bold);  
  font-size: var(--font-size-medium) ;
  line-height: var(--line-height-medium);
color: var(--al-black);       
}

/* Buy Here Arrow Button Link */
.experience-single__ticket-btn {
  font-family: var(--font-heading-bold) !important;
  font-size: var(--font-size-main);   
  line-height: 100%; 
  color: var(--al-black) !important;
  text-decoration: underline !important;
  display: inline-block;
  cursor: pointer;
  margin-top: 24px
}


.experience-single__divider {
  border: none;
  border-top: 1px solid var(--al-black);
  width: 100%;
  /* margin-top: 32px; */
}

.experience-single__meta-item + .experience-single__meta-item {
  border-left: 1px solid var(--al-light-grey);
  padding-left: 48px; 
}

/* EVENT DETAILS CARD & MAP SECTION           */
.experience-single__event-details-card {
  display: grid;
  grid-template-columns: 1fr 1.312fr; 
  gap: 54px;                        
  background-color: var(--al-light-grey); 
  padding: 32px;                  
  border-radius: 0px;               
  /* width: 100%; */
  max-width: 65.39%;   /* 837px / 1280px container */
  box-sizing: border-box;
  margin-top: 32px;         
  align-items: stretch;
}

.experience-single__event-details-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.experience-single__details-title {
  margin-bottom: 24px;              
}

.experience-single__details-meta {
  display: flex;
  flex-direction: column;
  gap: 24px;                        
}

.experience-single__details-divider {
  border: none;
  border-top: 1px solid var(--al-light-grey); 
  width: 100%;
  margin: 0;
}

.experience-single__event-details-right {
  width: 100%;
  height: 100%;
  min-height: 274px;     
}

.experience-single__map-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.experience-single__map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.experience-single__event-details-card .experience-single__details-meta .experience-single__meta-item + .experience-single__meta-item{
  padding-left: 0px;
  border-left: none;
}

/* MOBILE RESPONSIVE STYLES (375px Breakpoint) */
@media (max-width: 767.98px) {

  .experience-single__banner {
    width: 100%;
    margin-bottom: 48px;
  }

  .experience-single__banner img {
    aspect-ratio: 375 / 188;
  }

  /* Stack columns vertically on mobile */
  .experience-single__details-box {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0px;
  }

  .experience-single__tags-container{
    margin-bottom: 16px;
  }

  .experience-single__description {
    margin-bottom: 32px;
  }


  /* Stack metadata rows vertically */
  .experience-single__meta-row {
    flex-direction: column;
    gap: 32px;
    padding-bottom: 0px;
  }

  .experience-single__ticket-box {
    /* min-height: 160px; */
    /* margin: 0px 15px; */
    padding: 10px 15px 0px 15px;
    gap: 42px;
  }
  .experience-single__ticket-info{
    padding-top: 22px;
    margin-top: 0px;
    margin-left: 1px;
  }

  .experience-single__meta-item + .experience-single__meta-item {
    border-left: none;
    border-top: 1px solid var(--al-light-grey);
    padding-left: 0;
    padding-top: 24px; 
  }

.experience-single__event-details-card .experience-single__details-meta .experience-single__meta-item + .experience-single__meta-item{
  padding-top: 0px;
}

  /* <--- AREA TO REVIEW: Mobile Details Card Layouts ---> */
  .experience-single__event-details-card {
    grid-template-columns: 1fr;
    gap: 24px;                       
    padding: 16px;                   
    margin-top: 32px;
    max-width: 100%;
  }

  .experience-single__event-details-right {
    height: 200px;                   /* <--- AREA TO REVIEW: Mobile map height */
    min-height: auto;
  }
}

@media (max-width: 767.98px) {
  .experience-single__divider--desktop {
    display: none;
  }
}

@media (min-width: 768px) {
  .experience-single__divider--mobile {
    display: none;
  }
}