/*==================================================
EMPOWERED TEACHERS FORUM
Main Stylesheet
Part 1 of 2

TABLE OF CONTENTS

Variables
Reset
Layout
Navigation
Hero
Buttons
Testimonials
Global Images
Card System
Products
Resources
==================================================*/

/*==================================================

VARIABLES
==================================================*/

:root{

--primary:#d4af37;
--primary-hover:#c19c2e;

--dark:#052f23;
--dark-alt:#0b3d2f;
--footer:#021a13;

--light:#f7f9f8;

--text-light:#fff;
--text-dark:#333;
--text-muted:#555;

--radius:8px;
--radius-lg:15px;
--radius-xl:18px;

--transition:.3s;

--shadow:0 20px 50px rgba(0,0,0,.15);

}

/*==================================================
2. RESET
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html,
body{

overflow-x:hidden;

width:100%;

}

body{

font-family:'Montserrat',sans-serif;

background:var(--dark);

color:var(--text-light);

line-height:1.7;

}

/*==================================================
3. LAYOUT
==================================================*/

.container{

width:90%;

max-width:1200px;

margin:auto;

padding:80px 0;

}

/*==================================================
4. NAVIGATION
==================================================*/

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

display:flex;

align-items:center;

gap:15px;

color:var(--primary);

font-size:20px;

font-weight:800;

letter-spacing:2px;

}

.logo img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

}

nav ul{

list-style:none;

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:var(--text-light);

font-weight:600;

transition:var(--transition);

}

nav a{

color:var(--primary);

}

/*==================================================
5. HERO
==================================================*/

.hero{

display:grid;

grid-template-columns:45% 55%;

align-items:center;

gap:60px;

min-height:90vh;

}

.hero-content{

width:100%;

}

.hero h1{

font-size:clamp(3rem,5vw,4.5rem);

line-height:1;

margin-bottom:30px;

font-weight:900;

}

.hero h1 span{

color:var(--primary);

}

.hero h2{

font-size:24px;

font-weight:400;

margin-bottom:40px;

}

.hero-image{

position:relative;

overflow:hidden;

border-radius:30px;

text-align:center;

margin-bottom:50px;

}

.hero-image img{

width:100%;

max-width:550px;

height:650px;

object-fit:cover;

margin:auto;

border-radius:20px;

}

.hero-image::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:var(--primary);

filter:blur(120px);

opacity:.18;

top:-120px;

right:-120px;

}

.hero-image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

    135deg,

    rgba(0,40,25,.15),

    rgba(0,0,0,.35)

);

}

/*==================================================
6. BUTTONS
==================================================*/

.btn,
.btn-primary{

display:inline-block;

text-decoration:none;

border-radius:var(--radius);

transition:var(--transition);

font-weight:700;

}

.btn{

background:#fff;

color:var(--dark);

padding:18px 40px;

}

.btn{

background:var(--primary);

}

.btn-primary{

background:var(--primary);

color:var(--dark);

padding:14px 28px;

}

.btn-primary{

background:var(--primary-hover);

}

/*==================================================
7. TESTIMONIALS
==================================================*/

.testimonials{

background:var(--dark-alt);

}

.section-title{

text-align:center;

color:var(--primary);

font-size:42px;

margin-bottom:50px;

}

.section-text{

text-align:center;

max-width:700px;

margin:0 auto 50px;

color:#00000;

}

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

/*==================================================
8. GLOBAL IMAGE CONTROL
==================================================*/

img{

display:block;

max-width:100%;

}

/*==================================================
9. CARD SYSTEM
==================================================*/

.card{

background:#fff;

border-radius:var(--radius-lg);

padding:30px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}

.card{

transform:translateY(-8px);

}

.card h3,
.card h4{

color:var(--dark);

}

.card p{

color:var(--text-muted);

}

/*==================================================
10. PRODUCTS
==================================================*/

.products{

background:var(--light);

color:var(--text-dark);

}

.products .cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.product-image{

text-align:center;

margin-bottom:8px;

}

.product-image img{

width:auto;

height:220px;

max-width:100%;

object-fit:contain;

margin:0 auto;

}

.card h3{

margin-top:0;

margin-bottom:10px;

}

.select-toggle{

display:flex;

align-items:center;

gap:10px;

margin-top:20px;

padding:14px 18px;

border:2px solid #ddd;

border-radius:8px;

cursor:pointer;

transition:var(--transition);

font-weight:700;

color:var(--dark);

}

.select-toggle{

border-color:var(--primary);

}

.select-toggle input{

width:20px;

height:20px;

accent-color:var(--primary);

flex:0 0 auto;

}

.card.offer-checkbox .select-toggle{

border-color:var(--primary);

background:#fdf8ec;

}

.checkout-bar{

position:sticky;

bottom:20px;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

margin-top:40px;

padding:20px 25px;

background:var(--dark);

color:#fff;

border-radius:var(--radius-lg);

box-shadow:var(--shadow);

}

.checkout-bar #checkoutSummary{

font-weight:600;

}

.checkout-bar button{

white-space:nowrap;

}
/*==================================================
11. RESOURCES
==================================================*/

.resources{
background:var(--light);
color:var(--text-dark);
}

/*--------------------------------------------------
RESOURCES CONTAINER
--------------------------------------------------*/

.resources .container{
width:90%;
max-width:1200px;
margin:auto;

/* Reduced vertical padding */
padding:45px 0;

}

/*--------------------------------------------------
SECTION HEADING
--------------------------------------------------*/

.resources h2{
text-align:center;

font-size:42px;
line-height:1.15;

color:var(--dark);

margin:0 0 10px;

}

/* Introductory text */

.resources .section-text{
text-align:center;

max-width:700px;

margin:0 auto 35px;

color:#555;

font-size:17px;

line-height:1.6;

}

/*--------------------------------------------------
RESOURCE GRID
--------------------------------------------------*/

.resources-grid{

display:flex;

flex-direction:column;

width:100%;

/* Space between Resource 1 and Resource 2 */
gap:55px;

}

/*--------------------------------------------------
RESOURCE CARD
--------------------------------------------------*/

.resource-card{

display:grid;

/*
   Give the image enough room while keeping
   the text slightly wider.
*/
grid-template-columns:45% 55%;

align-items:center;

width:100%;

gap:20px;

}

/* Reverse the second resource */

.resource-card.reverse{

grid-template-columns:45% 55%;

}

/*--------------------------------------------------
RESOURCE IMAGE
--------------------------------------------------*/

.resource-image{

width:100%;

display:flex;

justify-content:center;

align-items:center;

}

/*
Larger images so they actually occupy
the available space.
*/

.resource-image img{

display:block;

width:100%;

max-width:420px;

height:auto;

margin:auto;

object-fit:contain;

}

/*--------------------------------------------------
REVERSE RESOURCE
--------------------------------------------------*/

.resource-card.reverse .resource-image{

order:2;

}

.resource-card.reverse .resource-content{

order:1;

}

/*--------------------------------------------------
RESOURCE CONTENT
--------------------------------------------------*/

.resource-content{

width:100%;

padding:0 10px;

}

/* Free download badge */

.free-badge{

display:inline-block;

margin-bottom:8px;

font-size:13px;

letter-spacing:1px;

font-weight:700;

color:#666;

}

/* Resource title */

.resource-content h3{

font-size:32px;

line-height:1.2;

color:var(--dark);

margin:0 0 12px;

}

/* Description */

.resource-content p{

color:#444;

font-size:16px;

line-height:1.6;

margin:0 0 12px;

}

/*--------------------------------------------------
RESOURCE FEATURES
--------------------------------------------------*/

.resource-content ul{

margin:12px 0 18px;

padding-left:20px;

}

.resource-content li{

margin-bottom:5px;

color:#333;

line-height:1.5;

}

/*--------------------------------------------------
RESOURCE BUTTON
--------------------------------------------------*/

.resource-content .btn-primary{

display:inline-block;

margin-top:5px;

}

/*==================================================
RESOURCES — TABLET
==================================================*/

@media (max-width:900px){

.resource-card{

    grid-template-columns:42% 58%;

    gap:20px;

}

.resource-card.reverse{

    grid-template-columns:42% 58%;

}

.resource-image img{

    max-width:360px;

}

.resource-content h3{

    font-size:29px;

}

}

/*==================================================
RESOURCES — MOBILE
==================================================*/

@media (max-width:768px){

.resources .container{

    width:92%;

    padding:40px 0;

}


/* Heading */

.resources h2{

    font-size:32px;

    margin-bottom:10px;

}


.resources .section-text{

    font-size:16px;

    margin-bottom:30px;

    line-height:1.6;

}


/* Resource spacing */

.resources-grid{

    gap:55px;

}


/* Stack resources */

.resource-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    gap:20px;

    text-align:center;

}


/* Always put image first */

.resource-card.reverse .resource-image{

    order:0;

}

.resource-card.reverse .resource-content{

    order:0;

}


/* Image */

.resource-image{

    width:100%;

}

.resource-image img{

    width:100%;

    max-width:340px;

    height:auto;

    margin:auto;

}


/* Content */

.resource-content{

    width:100%;

    padding:0;

}


.free-badge{

    margin-bottom:8px;

}


.resource-content h3{

    font-size:27px;

    line-height:1.2;

    margin-bottom:10px;

}


.resource-content p{

    font-size:16px;

    line-height:1.55;

    margin-bottom:10px;

}


/* Feature list */

.resource-content ul{

    display:inline-block;

    text-align:left;

    margin:12px auto 18px;

    padding-left:20px;

}

.resource-content li{

    margin-bottom:5px;

}


/* Button */

.resource-content .btn-primary{

    display:block;

    width:100%;

    max-width:320px;

    margin:10px auto 0;

}

}

/*==================================================
RESOURCES — SMALL PHONES
==================================================*/

@media (max-width:480px){

.resources .container{

    width:94%;

    padding:35px 0;

}

.resources h2{

    font-size:28px;

}

.resources .section-text{

    font-size:15px;

    margin-bottom:25px;

}

.resources-grid{

    gap:45px;

}

.resource-image img{

    max-width:310px;

}

.resource-content h3{

    font-size:25px;

}

.resource-content p{

    font-size:15px;

}

}
/*==================================================
12. COMMUNITY / JOIN SECTION
==================================================*/

.community-section{

background:linear-gradient(
    135deg,
    var(--dark),
    var(--dark-alt)
);

text-align:center;

}

.community-text{

max-width:850px;

margin:0 auto 60px;

}

.community-text h2{

font-size:48px;

color:var(--primary);

margin-bottom:20px;

}

.community-text p{

font-size:22px;

color:#f2f2f2;

}

/*==================================================
13. COMMUNITY STATS
==================================================*/

.stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:0;

text-align:center;

}

.stat{

background:rgba(255,255,255,.08);

border-radius:15px;

padding:35px 20px;

backdrop-filter:blur(8px);

}

.stat h2{

color:var(--primary);

font-size:42px;

margin-bottom:10px;

}

.stat p{

color:#fff;

font-size:17px;

}

/*==================================================
14. COMMUNITY HIGHLIGHTS / EVENTS SHOWCASE
==================================================*/

.community-highlights{

background:var(--light);

color:var(--text-dark);

overflow:hidden;

}

.community-heading{

max-width:780px;

margin:0 auto 50px;

text-align:center;

}

.community-eyebrow{

display:inline-block;

margin-bottom:12px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:var(--primary);

}

.community-highlights .section-title{

margin-bottom:16px;

}

.community-highlights .section-text{

max-width:700px;

margin:0 auto;

color:#555;

line-height:1.7;

}

/* Two featured event posters */

.community-highlights .events-showcase{

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:30px;

max-width:1200px;

margin:0 auto;

}

.community-highlights .event-card{

position:relative;

overflow:hidden;

padding:0;

background:#fff;

color:var(--text-dark);

border-radius:22px;

box-shadow:0 12px 35px rgba(5,47,35,.10);

transition:
    transform .45s ease,
    box-shadow .45s ease;

}

.community-highlights .event-image-wrapper{

position:relative;

overflow:hidden;

background:var(--dark);

}

.community-highlights .event-image{

display:block;

width:100%;

height:auto;

max-width:none;

transition:
    transform .7s cubic-bezier(.2,.7,.2,1);

}

/* Gentle hover movement */

.community-highlights .event-card{

transform:translateY(-7px);

box-shadow:0 22px 50px rgba(5,47,35,.18);

}

.community-highlights .event-card .event-image{

transform:scale(1.035);

}

/* Gold accent on hover */

.community-highlights .event-card::after{

content:"";

position:absolute;

left:0;

right:0;

bottom:0;

height:4px;

background:var(--primary);

transform:scaleX(0);

transform-origin:center;

transition:transform .4s ease;

}

.community-highlights .event-card:hover::after{

transform:scaleX(1);

}

/* Scroll entrance animation */

.community-highlights .event-left{

opacity:0;

transform:translateX(-45px);

}

.community-highlights .event-right{

opacity:0;

transform:translateX(45px);

}

.community-highlights .event-left.event-visible{

opacity:1;

transform:translateX(0);

transition:
    opacity .8s ease,
    transform .8s ease;

}

.community-highlights .event-right.event-visible{

opacity:1;

transform:translateX(0);

transition:
    opacity .8s ease .15s,
    transform .8s ease .15s;

}

/*==================================================
15. FORMS
==================================================*/

form{

max-width:700px;

margin:auto;

width:100%;

}

input,
textarea{

width:100%;

padding:18px;

margin-bottom:20px;

border-radius:8px;

border:1px solid #ddd;

font-size:16px;

font-family:inherit;

}

textarea{

resize:vertical;

min-height:160px;

}

button{

width:100%;

padding:18px;

border:none;

border-radius:8px;

background:var(--primary);

color:var(--dark);

font-weight:700;

font-size:17px;

cursor:pointer;

transition:var(--transition);

}

button{

background:var(--primary-hover);

}

/*==================================================
16. SUCCESS MESSAGE
==================================================*/

.success-card{

background:#fff;

color:var(--dark);

border-radius:18px;

padding:45px;

text-align:center;

box-shadow:var(--shadow);

}

.success-card h2{

color:var(--dark);

margin-bottom:20px;

}

.success-card p{

color:#555;

}

/*==================================================
17. FOOTER
==================================================*/

footer{

background:var(--footer);

color:#fff;

text-align:center;

padding:40px 20px;

}

.social{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:20px;

font-size:20px;

}

footer p{

opacity:.8;

font-size:15px;

}

footer a{

color:var(--primary);

text-decoration:none;

}

/*==================================================
18. MOBILE
==================================================*/

@media (max-width:768px){

.container{

width:92%;

padding:60px 0;

}

/* Navigation */

nav{

flex-direction:column;

gap:20px;

text-align:center;

}

.logo{

flex-direction:column;

}

.logo img{

width:70px;

height:70px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

/* Hero */

.hero{

grid-template-columns:1fr;

text-align:center;

gap:40px;

min-height:auto;

}

.hero-content{

order:1;

}

.hero-image{

order:2;

margin-bottom:20px;

}

.hero-image img{

max-width:420px;

width:100%;

height:500px;

object-fit:cover;

}

.hero h1{

font-size:2.6rem;

}

.hero h2{

font-size:1.2rem;

}

/* Resources */

.resources-grid{

gap:70px;

}

.resource-card{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:25px;

width:100%;

}

/* Always show image first on mobile, even for the "reverse" card */

.resource-card.reverse .resource-image{

order:0;

}

.resource-card.reverse .resource-content{

order:0;

}

.resource-image{

width:100%;

}

.resource-image img{

width:100%;

max-width:300px;

}

.resource-content{

width:100%;

max-width:100%;

margin:0;

padding:0;

}

.resource-content h3{

font-size:30px;

}

.resource-content p{

font-size:17px;

}

.resource-content ul{

display:inline-block;

text-align:left;

margin:20px auto;

}

.resource-content .btn-primary{

display:block;

width:100%;

max-width:320px;

margin:25px auto 0;

}

/* Products */

.products .cards{

grid-template-columns:1fr;

}

.checkout-bar{

flex-direction:column;

align-items:stretch;

text-align:center;

bottom:10px;

}

/* Cards */

.cards{

grid-template-columns:1fr;

}

/* Stats */

.stats{

grid-template-columns:1fr;

}

/* Community Highlights / Events */

.community-highlights{

    padding-left:0;

    padding-right:0;

}

.community-highlights .community-heading{

    margin-bottom:35px;

}

.community-highlights .events-showcase{

    grid-template-columns:1fr;

    gap:24px;

}

.community-highlights .event-card{

    border-radius:17px;

}

.community-highlights .event-left,
.community-highlights .event-right{

    transform:translateY(30px);

}

.community-highlights .event-left.event-visible,
.community-highlights .event-right.event-visible{

    transform:translateY(0);

}

/* Forms */

form{

width:100%;

}

input,
textarea,
button{

font-size:16px;

}

}
/*==================================================
19. EVENTS
==================================================*/

.events{

background:var(--dark-alt);

}

.events-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-top:50px;

}

.event-card{

background:#fff;

color:var(--text-dark);

border-radius:var(--radius-lg);

padding:30px;

box-shadow:var(--shadow);

transition:var(--transition);

display:flex;

flex-direction:column;

}

.event-card{

transform:translateY(-8px);

}

.event-date{

display:block;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:var(--primary-hover);

margin-bottom:14px;

}

.event-card h3{

color:var(--dark);

font-size:22px;

margin-bottom:12px;

}

.event-card p{

color:var(--text-muted);

margin-bottom:20px;

flex-grow:1;

}

.event-price{

font-weight:800;

font-size:18px;

color:var(--dark);

margin-bottom:20px;

}

.event-card button{

margin-top:auto;

}

/*==================================================
20. EVENT REGISTRATION MODAL
==================================================*/

.event-modal{

position:fixed;

inset:0;

z-index:1000;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

background:rgba(2,26,19,.75);

backdrop-filter:blur(4px);

}

/* Browsers apply [hidden]{display} without !important, so our
display above would otherwise beat it in the cascade. This
keeps the modal actually hidden when the "hidden" attribute is set. */
.event-modal[hidden]{

display:none !important;

}

.event-modal-content{

position:relative;

width:100%;

max-width:440px;

background:#fff;

color:var(--text-dark);

border-radius:var(--radius-lg);

box-shadow:var(--shadow);

padding:45px 35px 35px;

}

.event-modal-close{

position:absolute;

top:16px;

right:16px;

width:34px;

height:34px;

border:none;

border-radius:50%;

background:var(--light);

color:var(--dark);

font-size:20px;

line-height:1;

cursor:pointer;

transition:var(--transition);

}

.event-modal-close{

background:var(--primary);

color:var(--dark);

}

.event-modal-content h3{

color:var(--dark);

font-size:26px;

margin-bottom:8px;

padding-right:30px;

}

.event-modal-content > p{

color:var(--text-muted);

font-size:15px;

margin-bottom:25px;

}

#eventRegisterForm input{

margin-bottom:16px;

}

#eventFormMessage{

text-align:center;

font-size:14px;

font-weight:600;

min-height:20px;

}




/*==================================================
21. EVENTS — MOBILE
==================================================*/

@media (max-width:768px){

.events-grid{

grid-template-columns:1fr;

gap:20px;

}

.event-modal-content{

padding:40px 25px 30px;

}

}

/* Respect users who prefer reduced motion */

@media (prefers-reduced-motion){

.community-highlights .event-left,
.community-highlights .event-right{

    opacity:1;

    transform:none;

}

.community-highlights .event-card,
.community-highlights .event-image,
.community-highlights .event-card::after{

    transition:none;

}

}

/* registration event */

.events-empty{
grid-column:1 / -1;
text-align:center;
background:#fff;
color:var(--text-dark);
border-radius:var(--radius-lg);
box-shadow:var(--shadow);
padding:60px 30px;
}

.events-empty i{
font-size:36px;
color:var(--primary);
margin-bottom:20px;
}

.events-empty h3{
color:var(--dark);
font-size:24px;
margin-bottom:12px;
}

.events-empty p{
color:var(--text-muted);
max-width:420px;
margin:0 auto 25px;
}

.events-empty .btn-primary{
display:inline-block;
}
/* ==================================================
FEATURED COMMUNITY EVENTS
================================================== */

.community-highlights .events-showcase {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
width: 100%;
margin-top: 45px;
}

.community-highlights .featured-event {
width: 100%;
min-width: 0;
background: transparent;
padding: 0;
margin: 0;
border: 0;
box-shadow: none;
}

.community-highlights .featured-event-image {
width: 100%;
overflow: hidden;
border-radius: 22px;
background: #f5f5f5;
line-height: 0;
}

.community-highlights .featured-event-image picture {
display: block;
width: 100%;
}

.community-highlights .featured-event-image img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
object-fit: contain;
transition: transform 0.5s ease;
}

/* Subtle premium hover effect */

.community-highlights .featured-event img {
transform: scale(1.025);
}

/* ==================================================
FEATURED EVENTS — MOBILE
================================================== */

@media (max-width: 768px) {

.community-highlights .events-showcase {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
}

.community-highlights .featured-event-image {
    border-radius: 16px;
}

}

/*==================================================
22. TEAM / ACTIVITIES TEASER
(sits after Testimonials on index.html, links out to activities.html)
==================================================*/

.team-teaser{
  background:var(--dark-alt);
  text-align:center;
}

.team-teaser .section-title{
  margin-bottom:16px;
}

.team-teaser .section-text{
  margin-bottom:35px;
}

.team-teaser .btn-primary{
  display:inline-block;
}

/*==================================================
23. ACTIVITIES PAGE (activities.html)
==================================================*/

.activity-page .container{
  width:90%;
  max-width:1200px;
  margin:auto;
  padding:80px 0;
}

/* Page heading */
.activity-hero{
  text-align:center;
  max-width:780px;
  margin:0 auto 60px;
}

.activity-eyebrow{
  display:inline-block;
  margin-bottom:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--primary);
  text-transform:uppercase;
}

.activity-hero h1{
  font-size:clamp(2.4rem,4vw,3.2rem);
  color:var(--text-light);
  margin:0 0 18px;
  font-weight:900;
}

.activity-hero h1 span{ color:var(--primary); }

.activity-hero p{
  font-size:18px;
  color:#dfe8e3;
}

/* Two-column layout — left 1 part, right 3 parts */
.activity-columns{
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:60px;
  align-items:start;
}

/* ---------- LEFT: TEAM ---------- */
.team-col h2,
.gallery-col h2{
  font-size:26px;
  color:var(--primary);
  margin-bottom:8px;
  letter-spacing:1px;
}

.team-col > p,
.gallery-col > p{
  color:#cfe0d8;
  font-size:15px;
  margin-bottom:30px;
}

.team-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.team-card{
  display:flex;
  align-items:center;
  gap:20px;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.team-card:hover{
  transform:translateY(-4px);
}

.team-photo{
  position:relative;
  flex:0 0 88px;
  width:88px;
  height:88px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--primary);
  background:var(--light);
}

.team-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
}

.team-info h3{
  color:var(--dark);
  font-size:18px;
  margin:0 0 4px;
}

.team-info p{
  color:var(--text-muted);
  font-size:14px;
  margin:0;
  font-weight:600;
}

.team-card.placeholder{
  border:2px dashed var(--primary);
  background:rgba(255,255,255,.06);
  box-shadow:none;
}

.team-card.placeholder .team-photo{
  border-style:dashed;
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-card.placeholder .team-photo i{
  color:var(--primary);
  font-size:26px;
}

.team-card.placeholder .team-info h3,
.team-card.placeholder .team-info p{
  color:#e8efe9;
}

/* ---------- RIGHT: ACTIVITIES ---------- */
/* Landscape images stacked one on top of the other, never side by side */
.gallery-grid{
  display:flex;
  flex-direction:column;
  gap:30px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  aspect-ratio:16/9;
  width:100%;
  background:var(--dark-alt);
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.gallery-item:hover img{
  transform:scale(1.05);
}

.gallery-item .caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 20px;
  background:linear-gradient(to top, rgba(2,26,19,.85), rgba(2,26,19,0));
  font-size:14px;
  font-weight:600;
  color:#fff;
}

/* ---------- JOIN CTA (bottom of activities page, links to index.html#join) ---------- */
.activity-join-cta{
  margin-top:80px;
  text-align:center;
  background:var(--dark-alt);
  border-radius:var(--radius-lg);
  padding:60px 30px;
}

.activity-join-cta h2{
  color:var(--primary);
  font-size:34px;
  margin:0 0 14px;
}

.activity-join-cta p{
  color:#e8efe9;
  font-size:17px;
  max-width:600px;
  margin:0 auto 30px;
}

.activity-join-cta .btn-primary{
  display:inline-block;
}

/* ---------- ACTIVITIES PAGE — MOBILE ---------- */
@media (max-width:900px){
  .activity-columns{
    grid-template-columns:1fr;
    gap:50px;
  }
}

@media (max-width:600px){
  .activity-page .container{
    width:92%;
    padding:50px 0;
  }
  .team-card{
    flex-direction:column;
    text-align:center;
  }
  .activity-join-cta{
    padding:45px 20px;
  }
}

/*==================================================
END OF STYLESHEET
==================================================*/