/*
Theme Name:   WOW! Play for All Children
Theme URI:    https://wowchildrensmuseum.org
Description:  Divi Child Theme
Author:       Overtime Media
Author URI:   https://overtimeagency.com
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  divi-child
*/

/* Custom Cursor Ring/Dot -- can do this if we want:  * { cursor: none; } /* Hide default cursor */ */

* { cursor: none; } 

#cursor-dot {
  width: 10px;
  height: 10px;
  background: #3B1F59;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#cursor-ring {
  width: 36px;
  height: 36px;
  border: 2px solid #3B1F59;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.12s ease-out, top 0.12s ease-out, border-color 0.4s ease;
  z-index: 9998;
}

.admin-bar * { cursor: pointer !important; }
.admin-bar #cursor-dot { display:none !important; }
.admin-bar #cursor-ring { display:none !important; }


/*Homepage Event Grid Styles*/

.upcoming-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .upcoming-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .upcoming-events-grid {
        grid-template-columns: 1fr;
    }
}
.upcoming-event-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #3b1f59;
    background: #fff;
}
.upcoming-event-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.upcoming-event-card__image--placeholder {
    width: 100%;
    height: 200px;
    background: #e8e8e8;
    display: block;
}
.upcoming-event-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}
.upcoming-event-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.upcoming-event-card__date {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 12px;
}
.upcoming-event-card__excerpt {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    flex: 1;
    margin: 0 0 20px;
}
.upcoming-event-card__button {
    display: inline-block;
    background-color: #FF0158;
    color: #fff !important;
    text-decoration: none;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.2s ease;
    align-self: flex-start;
    text-transform: uppercase;
}
.upcoming-event-card__button:hover {
    background-color: #ee9b00;
}

/* Fixing the Wave problem */
#home-jumps {
	margin-top: -30px !important;
}

@media (min-width: 800px) and (max-width: 1069px) {
	#home-jumps {
    	margin-top: -40px !important;
    }
}

@media (min-width: 1070px) {
	#home-jumps {
    	margin-top: -70px !important;
    }
}

@media (min-width: 1880px) {
    #home-jumps {
        margin-top: -100px !important;
    }
}
 
@media (min-width: 1640px) {
    #bottom-wave {
        background-position: center top -80px !important;
    }
}

/* additional styles to handle different column settings in the grid */

.upcoming-events-grid--cols-1 { grid-template-columns: 1fr; }
.upcoming-events-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.upcoming-events-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.upcoming-events-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .upcoming-events-grid--cols-3,
    .upcoming-events-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .upcoming-events-grid--cols-1,
    .upcoming-events-grid--cols-2,
    .upcoming-events-grid--cols-3,
    .upcoming-events-grid--cols-4 { grid-template-columns: 1fr; }
}

/* People Grid */

/* Person Grid */
.person-grid {
    display: grid;
    gap: 32px;
    margin: 0 auto;
}
.person-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.person-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.person-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .person-grid--cols-3,
    .person-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .person-grid--cols-2,
    .person-grid--cols-3,
    .person-grid--cols-4 { grid-template-columns: 1fr; }
}

.person-card {
    text-align: center;
}

.person-card__flip {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    perspective: 1000px;
}

.person-card__flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.person-card:hover .person-card__flip > .person-card__front,
.person-card:hover .person-card__flip > .person-card__back {
    pointer-events: none;
}

.person-card__front,
.person-card__back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.6s ease;
}

.person-card__front img,
.person-card__back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-card__back {
    transform: rotateY(180deg);
}

.person-card:hover .person-card__front {
    transform: rotateY(-180deg);
}

.person-card:hover .person-card__back {
    transform: rotateY(0deg);
}

.person-card__name {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 4px;
    padding-bottom: 0;
}

.person-card__position {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
    line-height: 1em;
}