/* WorkshopBanner.module.css */


.workshopBanner {
 position: relative;
 width: 100vw;
 left: 50%;
 right: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
 background: linear-gradient(135deg,
   #232F3E 0%,
   #1B2631 25%,
   #146EB4 50%,
   #FF9900 100%);
 background-size: 400% 400%;
 animation: awsGradient 15s ease infinite;
 padding: 4rem 2rem;
 overflow: hidden;
 box-shadow:
   0 10px 50px rgba(35, 47, 62, 0.2),
   inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


[data-theme='dark'] .workshopBanner {
 background: linear-gradient(135deg,
   #0F1B26 0%,
   #232F3E 25%,
   #1B4F72 50%,
   #2874A6 100%);
 background-size: 400% 400%;
 animation: awsGradient 15s ease infinite;
}


@keyframes awsGradient {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}


/* Moving Stars Animation */
.starsContainer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 z-index: 1;
}


.star {
 position: absolute;
 background: linear-gradient(45deg, #FFD700, #FFA500, #FF6347);
 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
 animation: moveStar 8s linear infinite;
 box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}


.star:nth-child(1) {
 width: 28px;
 height: 28px;
 top: 10%;
 animation-duration: 12s;
 animation-delay: 0s;
}


.star:nth-child(2) {
 width: 22px;
 height: 22px;
 top: 30%;
 animation-duration: 10s;
 animation-delay: -2s;
}


.star:nth-child(3) {
 width: 35px;
 height: 35px;
 top: 50%;
 animation-duration: 14s;
 animation-delay: -4s;
}


.star:nth-child(4) {
 width: 26px;
 height: 26px;
 top: 70%;
 animation-duration: 11s;
 animation-delay: -1s;
}


.star:nth-child(5) {
 width: 32px;
 height: 32px;
 top: 20%;
 animation-duration: 13s;
 animation-delay: -3s;
}


.star:nth-child(6) {
 width: 24px;
 height: 24px;
 top: 80%;
 animation-duration: 9s;
 animation-delay: -5s;
}


.star:nth-child(7) {
 width: 30px;
 height: 30px;
 top: 40%;
 animation-duration: 15s;
 animation-delay: -2.5s;
}


.star:nth-child(8) {
 width: 34px;
 height: 34px;
 top: 60%;
 animation-duration: 8s;
 animation-delay: -4.5s;
}


.star:nth-child(9) {
 width: 27px;
 height: 27px;
 top: 25%;
 animation-duration: 16s;
 animation-delay: -1.5s;
}


.star:nth-child(10) {
 width: 31px;
 height: 31px;
 top: 75%;
 animation-duration: 12s;
 animation-delay: -3.5s;
}


@keyframes moveStar {
 0% {
   transform: translateX(-100px) rotate(0deg) scale(0.5);
   opacity: 0;
 }
 10% {
   opacity: 1;
   transform: translateX(-50px) rotate(36deg) scale(1);
 }
 90% {
   opacity: 1;
   transform: translateX(calc(100vw + 50px)) rotate(324deg) scale(1);
 }
 100% {
   transform: translateX(calc(100vw + 100px)) rotate(360deg) scale(0.5);
   opacity: 0;
 }
}


/* Banner Content */
.bannerContent {
 position: relative;
 z-index: 10;
 max-width: 1200px;
 margin: 0 auto;
 text-align: center;
}


.bannerTitle {
 font-size: clamp(2rem, 4vw, 3rem);
 font-weight: 800;
 color: white;
 margin-bottom: 3rem;
 text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1rem;
 animation: titlePulse 2s ease-in-out infinite;
}


@keyframes titlePulse {
 0%, 100% {
   transform: scale(1);
 }
 50% {
   transform: scale(1.02);
 }
}


.titleIcon {
 font-size: 1.5em;
 animation: iconFloat 3s ease-in-out infinite;
}


.titleIcon:first-child {
 animation-delay: -1.5s;
}


@keyframes iconFloat {
 0%, 100% {
   transform: translateY(0px) rotate(0deg);
 }
 50% {
   transform: translateY(-10px) rotate(180deg);
 }
}


/* Workshop Cards */
.workshopCards {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
 gap: 2rem;
 max-width: 1200px;
 margin: 0 auto;
}


.workshopCard {
 background: linear-gradient(135deg,
   rgba(255, 255, 255, 0.95) 0%,
   rgba(248, 250, 252, 0.9) 100%);
 border-radius: 16px;
 padding: 2.5rem;
 text-decoration: none;
 color: inherit;
 display: flex;
 align-items: center;
 gap: 2rem;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(10px);
 box-shadow:
   0 8px 32px rgba(0, 0, 0, 0.1),
   0 4px 16px rgba(0, 0, 0, 0.05);
 position: relative;
 overflow: hidden;
}


.workshopCard::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 153, 0, 0.1), transparent);
 transition: left 0.6s;
}


.workshopCard:hover::before {
 left: 100%;
}


.workshopCard:hover {
 transform: translateY(-8px) scale(1.02);
 box-shadow:
   0 20px 60px rgba(0, 0, 0, 0.15),
   0 8px 32px rgba(255, 153, 0, 0.2);
 border-color: rgba(255, 153, 0, 0.3);
}


[data-theme='dark'] .workshopCard {
 background: linear-gradient(135deg,
   rgba(30, 41, 59, 0.95) 0%,
   rgba(15, 23, 42, 0.9) 100%);
 border-color: rgba(255, 255, 255, 0.1);
 color: white;
}


[data-theme='dark'] .workshopCard:hover {
 border-color: rgba(255, 153, 0, 0.4);
 box-shadow:
   0 20px 60px rgba(0, 0, 0, 0.3),
   0 8px 32px rgba(255, 153, 0, 0.3);
}


.cardIcon {
 font-size: 3rem;
 flex-shrink: 0;
 animation: iconBounce 2s ease-in-out infinite;
}


@keyframes iconBounce {
 0%, 100% {
   transform: scale(1) rotate(0deg);
 }
 50% {
   transform: scale(1.1) rotate(5deg);
 }
}


.cardContent {
 flex: 1;
 text-align: left;
}


.cardTitle {
 font-size: 1.75rem;
 font-weight: 700;
 margin: 0 0 0.75rem 0;
 color: #232F3E;
 line-height: 1.3;
}


[data-theme='dark'] .cardTitle {
 color: white;
}


.cardDescription {
 font-size: 1.125rem;
 line-height: 1.5;
 color: #64748B;
 margin: 0 0 1rem 0;
}


[data-theme='dark'] .cardDescription {
 color: rgba(255, 255, 255, 0.8);
}


.cardBadge {
 display: inline-block;
 padding: 0.5rem 1.25rem;
 background: linear-gradient(135deg, #FF9900, #FF6B35);
 color: white;
 border-radius: 25px;
 font-size: 0.875rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}


.cardArrow {
 font-size: 1.5rem;
 color: #FF9900;
 transition: transform 0.3s ease;
 flex-shrink: 0;
}


.workshopCard:hover .cardArrow {
 transform: translateX(8px);
 color: #FF6B35;
}


/* Responsive Design */
@media screen and (max-width: 1100px) {
 .workshopCards {
   grid-template-columns: 1fr;
   gap: 1.5rem;
 }
  .workshopCard {
   min-width: auto;
 }
}


@media screen and (max-width: 768px) {
 .workshopBanner {
   padding: 3rem 1rem;
 }
  .bannerTitle {
   font-size: clamp(1.5rem, 5vw, 2rem);
   margin-bottom: 2rem;
   flex-direction: column;
   gap: 0.5rem;
 }
  .workshopCard {
   flex-direction: column;
   text-align: center;
   padding: 1.5rem;
   gap: 1rem;
 }
  .cardContent {
   text-align: center;
 }
  .cardIcon {
   font-size: 2.5rem;
 }
}


@media screen and (max-width: 480px) {
 .workshopBanner {
   padding: 2rem 0.75rem;
 }
  .bannerTitle {
   font-size: clamp(1.25rem, 6vw, 1.75rem);
 }
  .workshopCard {
   padding: 1.25rem;
 }
  .cardTitle {
   font-size: 1.5rem;
 }
  .cardDescription {
   font-size: 1rem;
 }
  .cardBadge {
   font-size: 0.8rem;
   padding: 0.45rem 1rem;
 }
}
