/* =====================================================
   SOCCA DREAM — ABOUT PAGE STYLES
   ===================================================== */

/* STORY SECTION */
.sd-about-story { background: var(--sd-white); padding: 5rem 2.5rem; }
.sd-about-inner { max-width: 1200px; margin: 0 auto; }
.sd-about-story-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.sd-about-body p { font-size: 1rem; color: #555; line-height: 1.85; margin-bottom: 1.25rem; }
.sd-about-body strong { color: var(--sd-navy-dark); }
.sd-about-story-img { position: relative; }
.sd-about-img-placeholder { background: var(--sd-navy); border-radius: 14px; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 5rem; color: rgba(255,255,255,0.15); gap: 1rem; position: relative; overflow: hidden; }
.sd-about-img-placeholder::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sd-green) 33.3%, #fff 33.3% 66.6%, var(--sd-red) 66.6%); }
.sd-about-img-placeholder span { font-family: 'Barlow', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.sd-about-img-placeholder img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; border-radius: 14px; }

/* MISSION & VALUES */
.sd-about-mission { background: var(--sd-navy); padding: 5rem 2.5rem; position: relative; }
.sd-about-mission::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sd-green) 33.3%, #fff 33.3% 66.6%, var(--sd-red) 66.6%); }
.sd-mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.sd-mission-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 2rem 1.5rem; transition: background 0.2s, transform 0.2s; }
.sd-mission-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); }
.sd-mission-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.sd-mission-card h3 { font-family: 'Barlow Condensed', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: var(--sd-gold) !important; letter-spacing: 1px !important; margin-bottom: 0.75rem !important; }
.sd-mission-card p { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.7; }

/* BRANCHES */
.sd-about-branches { background: var(--sd-off-white); padding: 5rem 2.5rem; }
.sd-branches-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.sd-branch-card { background: var(--sd-white); border-radius: 14px; border: 1px solid var(--sd-border); overflow: hidden; display: flex; flex-direction: column; }
.sd-branch-header { background: var(--sd-navy); padding: 1.5rem 1.75rem; display: flex; align-items: center; gap: 1rem; position: relative; }
.sd-branch-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sd-green) 33.3%, #fff 33.3% 66.6%, var(--sd-red) 66.6%); }
.sd-branch-icon { font-size: 2.5rem; }
.sd-branch-name { font-family: 'Bebas Neue', sans-serif !important; font-size: 1.8rem !important; color: var(--sd-white) !important; letter-spacing: 2px !important; line-height: 1 !important; margin: 0 !important; }
.sd-branch-region { font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sd-gold); margin: 4px 0 0; }
.sd-branch-body { padding: 1.75rem; flex: 1; }
.sd-branch-body p { font-size: 0.9rem; color: #555; line-height: 1.75; margin-bottom: 1.25rem; }
.sd-branch-details { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sd-branch-details li { font-size: 0.85rem; color: #666; }
.sd-branch-details a { color: var(--sd-navy) !important; text-decoration: none !important; }
.sd-branch-details a:hover { color: var(--sd-gold) !important; }
.sd-branch-btn { display: block; background: var(--sd-navy); color: var(--sd-white) !important; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 1rem; text-decoration: none !important; border-radius: 0 0 14px 14px; transition: background 0.2s; }
.sd-branch-btn:hover { background: var(--sd-navy-light); }
.sd-branches-coming { text-align: center; font-size: 0.9rem; color: #888; }
.sd-branches-coming a { color: var(--sd-navy) !important; }

/* TEAM */
.sd-about-team { background: var(--sd-white); padding: 5rem 2.5rem; }
.sd-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.sd-team-card { background: var(--sd-off-white); border-radius: 12px; border: 1px solid var(--sd-border); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.sd-team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(27,42,107,0.1); }
.sd-team-img { height: 180px; background: var(--sd-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255,255,255,0.2); gap: 0.5rem; position: relative; overflow: hidden; }
.sd-team-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sd-team-img span { font-family: 'Barlow', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); position: relative; z-index: 1; }
.sd-team-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--sd-gold); }
.sd-team-body { padding: 1.25rem; }
.sd-team-name { font-family: 'Barlow Condensed', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: var(--sd-navy-dark) !important; margin-bottom: 0.25rem !important; }
.sd-team-role { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sd-gold); margin-bottom: 0.75rem; line-height: 1.4; }
.sd-team-bio { font-size: 0.82rem; color: #666; line-height: 1.6; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .sd-mission-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sd-about-story-content { grid-template-columns: 1fr; }
  .sd-branches-grid { grid-template-columns: 1fr; }
  .sd-mission-grid { grid-template-columns: 1fr; }
  .sd-team-grid { grid-template-columns: 1fr 1fr; }
  .sd-about-story, .sd-about-mission, .sd-about-branches, .sd-about-team { padding: 3rem 1.25rem; }
}