/* ==============================
   Upcoming Release Card Styling
   ============================== */
.timeline-section {
  display: flex;
  justify-content: center;
  padding: 50px 20px;
  background: #fff8e1; /* pastel yellow */
}

.teaser-btn, .play-btn {
  background: #ffcc80;
  border: none;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.teaser-btn:hover, .play-btn:hover {
  background: #ffb74d;
}

.music-info.hidden {
  display: none;
}

.music-info h3 {
  margin-top: 15px;
  font-size: 20px;
  color: #5d4037;
}

@media (max-width: 768px) {
  .upcoming-card {
    width: 100%;
  }
}

/* Flex container for calendar + music */
.upcoming-flex {
  display: flex;
  gap: 20px;                 /* default gap */
  align-items: center;        /* vertically center music */
  justify-content: center;
  margin-top: 20px;
  flex-wrap: nowrap;          /* keep side by side by default */
}

/* ---------- Desktop (large screens) ---------- */
@media (min-width: 1025px) {
  .upcoming-flex {
    justify-content: space-between; /* push items outward */
    gap: 100px;                         /* gap handled by spacing */
    width: 100%;
    padding: 0 40px;                /* side breathing room */
    box-sizing: border-box;
  }

  .calendar-wrapper {
    flex: 0 1 auto;
    width: clamp(360px, 45vw, 900px);  /* expands left */
    max-width: 900px;
  }

  .music-info {
    flex: 0 1 auto;
    width: clamp(260px, 28vw, 600px);  /* expands right */
    max-width: 600px;
    text-align: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .calendar-wrapper {
    flex: 2 1 0;             /* 2/3 width */
    max-width: 700px;         /* cap for tablets */
  }
  .music-info {
    flex: 1 1 0;             /* 1/3 width */
    max-width: 350px;
  }
  .upcoming-flex {
    gap: 30px;               /* moderate spacing */
  }
}

@media (max-width: 768px) {
  .upcoming-flex {
    flex-direction: column;   /* stack vertically */
    align-items: center;      /* horizontally center content */
    gap: 20px;                /* vertical spacing */
  }

  .calendar-wrapper,
  .music-info {
    flex: 1 1 100%;           /* full width */
    max-width: 100%;
  }
}


/* ==============================
   Masthead Social Icons (Music Platforms)
   ============================== */
.masthead-icons {
  margin: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px; /* Largest gap for big screens */
}

.masthead-icons a img {
  width: 50px;
  height: 50px;
  transition: transform 0.2s ease;
}

.masthead-icons a img:hover {
  transform: scale(1.3);
}

/* Footer Social Icons (Sub Platforms) */
.footer-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 40px; /* Same gap behavior for footer */
}

.footer-icons a img {
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease;
}

.footer-icons a img:hover {
  transform: scale(1.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .masthead-icons {
    gap: 30px; /* Shrinks gap on medium screens */
  }
  .masthead-icons a img {
    width: 40px;
    height: 40px;
  }
  .footer-icons {
    gap: 30px;
  }
  .footer-icons a img {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .masthead-icons {
    gap: 20px; /* Smallest gap on small screens */
  }
  .masthead-icons a img {
    width: 30px;
    height: 30px;
  }
  .footer-icons {
    gap: 20px;
  }
  .footer-icons a img {
    width: 26px;
    height: 26px;
  }
}

/* ==============================
   Contact me 
   ============================== */

.contact-form-embed iframe {
  width: 100%;
  border: none;
  transition: height 0.6s ease;
}

/* Desktop */
@media (min-width: 992px) {
  .contact-form-embed iframe {
    height: 1400px;
  }
}

/* Tablet */
@media (max-width: 991px) and (min-width: 769px) {
  .contact-form-embed iframe {
    height: 1700px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .contact-form-embed iframe {
    height: 1900px; /* give more vertical space */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .contact-form-embed iframe {
    height: 2200px;
  }
}

/* Remove extra padding inside accordion body */
.accordion-body {
  padding: 0.5rem; /* default is 1.25rem, reduce for small screens */
}

/* Make iframe behave responsively */
.contact-form-embed iframe {
  max-width: 100%;
  display: block;
}

/* Extra safeguard: no horizontal scroll on small screens */
@media (max-width: 768px) {
  .accordion-body {
    padding: 0.05rem; /* even smaller padding */
  }
}

.accordion {
  border-radius: 16px;  /* adjust to taste */
  overflow: hidden;     /* keeps children inside the curve */
  border: 1.5px solid;
}