/* ================================================================
   Rooted in Faith NC — Our Team Page
   All selectors namespaced .rif-tm-* to avoid conflicts.
   ================================================================ */

:root {
	--tm-pink:       #e8457a;
	--tm-pink-light: #f472a8;
	--tm-pink-dark:  #c2305f;
	--tm-black:      #111111;
	--tm-dark:       #1a1a2e;
	--tm-dark2:      #252540;
	--tm-gray:       #6b7280;
	--tm-gray-light: #f3f4f6;
	--tm-white:      #ffffff;
	--tm-radius:     14px;
	--tm-radius-lg:  24px;
	--tm-shadow:     0 8px 32px rgba(232,69,122,.15);
	--tm-shadow-md:  0 4px 20px rgba(0,0,0,.10);
	--tm-shadow-dk:  0 8px 40px rgba(0,0,0,.35);
}

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
.rif-tm-full-w {
	width:        100vw;
	position:     relative;
	left:         50%;
	right:        50%;
	margin-left:  -50vw;
	margin-right: -50vw;
}
.rif-tm-container {
	max-width:      1200px;
	margin-inline:  auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ----------------------------------------------------------------
   Scroll reveal
   ---------------------------------------------------------------- */
.rif-tm-reveal {
	opacity:    0;
	transform:  translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
}
.rif-tm-reveal.is-visible { opacity: 1; transform: none; }
.rif-tm-reveal--delay1 { transition-delay: .12s; }
.rif-tm-reveal--delay2 { transition-delay: .24s; }
.rif-tm-reveal--delay3 { transition-delay: .36s; }

/* ----------------------------------------------------------------
   Typography
   ---------------------------------------------------------------- */
.rif-tm-eyebrow {
	display:        block;
	font-size:      .78rem;
	font-weight:    700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--tm-pink);
	margin-bottom:  .75rem;
}
.rif-tm-eyebrow--light { color: rgba(255,255,255,.7); }

.rif-tm-section-title {
	font-size:   clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 800;
	color:       var(--tm-black);
	line-height: 1.2;
	margin:      0 0 1rem;
}
.rif-tm-section-title em { font-style: normal; color: var(--tm-pink); }

.rif-tm-section-sub {
	font-size:   1rem;
	color:       var(--tm-gray);
	max-width:   560px;
	line-height: 1.7;
	margin:      0;
}
.rif-tm-section-header {
	text-align:    center;
	margin-bottom: 3.5rem;
}
.rif-tm-section-header .rif-tm-section-sub { margin-inline: auto; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.rif-tm-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	padding:         .9rem 2.25rem;
	border-radius:   50px;
	font-weight:     700;
	font-size:       .95rem;
	font-family:     inherit;
	cursor:          pointer;
	text-decoration: none;
	transition:      background .2s, color .2s, transform .15s;
	border:          2px solid transparent;
	line-height:     1;
}
.rif-tm-btn:active { transform: scale(.97); }

.rif-tm-btn--white {
	background: var(--tm-white);
	color:      var(--tm-pink-dark);
	box-shadow: var(--tm-shadow-md);
}
.rif-tm-btn--white:hover { background: var(--tm-gray-light); color: var(--tm-pink-dark); }

.rif-tm-btn--ghost-white {
	background:   transparent;
	color:        var(--tm-white);
	border-color: rgba(255,255,255,.5);
}
.rif-tm-btn--ghost-white:hover {
	background:   rgba(255,255,255,.15);
	border-color: var(--tm-white);
	color:        var(--tm-white);
}

/* ================================================================
   HERO
   ================================================================ */
.rif-tm-hero {
	position:    relative;
	min-height:  72vh;
	display:     flex;
	align-items: flex-end;
	overflow:    hidden;
}

.rif-tm-hero__bg {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center 30%;
	background-repeat:   no-repeat;
	z-index:             0;
}
.rif-tm-hero__bg::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		rgba(26,26,46,.45) 0%,
		rgba(26,26,46,.75) 60%,
		rgba(26,26,46,.95) 100%
	);
}

.rif-tm-hero__inner {
	position:       relative;
	z-index:        1;
	padding-bottom: 5rem;
	padding-top:    10rem;
}

.rif-tm-hero__title {
	font-size:      clamp(3rem, 7vw, 5.5rem);
	font-weight:    900;
	color:          var(--tm-white);
	line-height:    1.05;
	margin:         0 0 1rem;
	letter-spacing: -.02em;
}
.rif-tm-hero__title em {
	font-style:  normal;
	background:  linear-gradient(135deg, var(--tm-pink-light), var(--tm-pink));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.rif-tm-hero__sub {
	font-size:   1.1rem;
	color:       rgba(255,255,255,.75);
	line-height: 1.7;
	margin:      0;
	max-width:   560px;
}

.rif-tm-hero__scroll {
	position:  absolute;
	bottom:    2rem;
	left:      50%;
	transform: translateX(-50%);
	z-index:   1;
}
.rif-tm-hero__scroll span {
	display:       block;
	width:         24px;
	height:        40px;
	border:        2px solid rgba(255,255,255,.3);
	border-radius: 12px;
	position:      relative;
}
.rif-tm-hero__scroll span::before {
	content:       '';
	position:      absolute;
	top:           6px;
	left:          50%;
	transform:     translateX(-50%);
	width:         4px;
	height:        8px;
	background:    rgba(255,255,255,.6);
	border-radius: 2px;
	animation:     tm-scroll 1.6s ease infinite;
}
@keyframes tm-scroll {
	0%   { opacity:1; transform:translateX(-50%) translateY(0); }
	100% { opacity:0; transform:translateX(-50%) translateY(14px); }
}

/* ================================================================
   STATS BAR
   ================================================================ */
.rif-tm-stats-bar {
	background: var(--tm-dark);
	padding-block: 0;
}
.rif-tm-stats-bar__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1px;
	background:            rgba(255,255,255,.07);
}
.rif-tm-stat-item {
	background:  var(--tm-dark);
	padding:     2.5rem 1.5rem;
	text-align:  center;
	transition:  background .25s;
}
.rif-tm-stat-item:hover { background: var(--tm-dark2); }
.rif-tm-stat-item__num {
	font-size:   2.75rem;
	font-weight: 900;
	line-height: 1;
	margin-bottom: .3rem;
	background:  linear-gradient(135deg, var(--tm-white), rgba(255,255,255,.65));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.rif-tm-stat-item__label {
	font-size:      .8rem;
	font-weight:    600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color:          rgba(255,255,255,.45);
}

/* ================================================================
   COACHING STAFF
   ================================================================ */
.rif-tm-coaches {
	background:    var(--tm-white);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.rif-tm-coaches__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1.5rem;
}

.rif-tm-coach-card {
	border-radius: var(--tm-radius-lg);
	overflow:      hidden;
	background:    var(--tm-white);
	box-shadow:    var(--tm-shadow-md);
	border:        1.5px solid var(--tm-gray-light);
	transition:    transform .25s, box-shadow .25s;
}
.rif-tm-coach-card:hover {
	transform:  translateY(-6px);
	box-shadow: 0 20px 56px rgba(0,0,0,.12);
}

.rif-tm-coach-card__photo {
	position:     relative;
	aspect-ratio: 3/4;
	overflow:     hidden;
	background:   var(--tm-dark);
}
.rif-tm-coach-card__photo img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	object-position: top center;
	display:    block;
	transition: transform .4s;
}
.rif-tm-coach-card:hover .rif-tm-coach-card__photo img { transform: scale(1.05); }

.rif-tm-coach-card__overlay {
	position:        absolute;
	inset:           0;
	background:      linear-gradient(to top, rgba(232,69,122,.9) 0%, transparent 55%);
	display:         flex;
	align-items:     flex-end;
	justify-content: center;
	padding-bottom:  1.5rem;
	opacity:         0;
	transition:      opacity .3s;
}
.rif-tm-coach-card:hover .rif-tm-coach-card__overlay { opacity: 1; }

.rif-tm-coach-card__social {
	display: flex;
	gap:     .65rem;
}
.rif-tm-coach-card__social a {
	width:           36px;
	height:          36px;
	background:      rgba(255,255,255,.2);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--tm-white);
	backdrop-filter: blur(6px);
	transition:      background .2s;
	text-decoration: none;
}
.rif-tm-coach-card__social a:hover { background: rgba(255,255,255,.38); }
.rif-tm-coach-card__social svg { width: 15px; height: 15px; }

.rif-tm-coach-card__body { padding: 1.35rem 1.5rem; }
.rif-tm-coach-card__name {
	font-size:   1.05rem;
	font-weight: 800;
	color:       var(--tm-black);
	margin:      0 0 .2rem;
}
.rif-tm-coach-card__role {
	display:        block;
	font-size:      .75rem;
	font-weight:    700;
	color:          var(--tm-pink);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom:  .7rem;
}
.rif-tm-coach-card__bio {
	font-size:   .86rem;
	line-height: 1.65;
	color:       var(--tm-gray);
	margin:      0;
}

/* ================================================================
   PLAYERS ROSTER
   ================================================================ */
.rif-tm-roster {
	background:    var(--tm-gray-light);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.rif-tm-roster__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1.5rem;
}

.rif-tm-player-card {
	background:    var(--tm-white);
	border-radius: var(--tm-radius-lg);
	overflow:      hidden;
	box-shadow:    var(--tm-shadow-md);
	border:        1.5px solid transparent;
	transition:    transform .25s, box-shadow .25s, border-color .25s;
}
.rif-tm-player-card:hover {
	transform:    translateY(-6px);
	box-shadow:   0 16px 48px rgba(0,0,0,.12);
	border-color: rgba(232,69,122,.25);
}

.rif-tm-player-card__photo {
	position:     relative;
	aspect-ratio: 3/4;
	overflow:     hidden;
	background:   var(--tm-dark);
}
.rif-tm-player-card__photo img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: top center;
	display:         block;
	transition:      transform .4s;
}
.rif-tm-player-card:hover .rif-tm-player-card__photo img { transform: scale(1.06); }

/* Jersey number badge */
.rif-tm-player-card__jersey {
	position:      absolute;
	top:           .85rem;
	left:          .85rem;
	background:    var(--tm-pink);
	color:         var(--tm-white);
	font-size:     .88rem;
	font-weight:   900;
	line-height:   1;
	padding:       .35rem .65rem;
	border-radius: 8px;
	box-shadow:    0 2px 8px rgba(232,69,122,.4);
	letter-spacing: -.01em;
}

/* Captain gold badge override */
.rif-tm-player-card[data-position="captain"] .rif-tm-player-card__jersey {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	box-shadow: 0 2px 8px rgba(245,158,11,.4);
}

.rif-tm-player-card__body {
	padding:     1rem 1.25rem 1.25rem;
	display:     flex;
	align-items: center;
	justify-content: space-between;
	gap:         .5rem;
}
.rif-tm-player-card__name {
	font-size:   .97rem;
	font-weight: 800;
	color:       var(--tm-black);
	margin:      0;
	line-height: 1.25;
}

/* Position badges */
.rif-tm-player-card__pos {
	display:        inline-block;
	font-size:      .7rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding:        .25rem .65rem;
	border-radius:  50px;
	white-space:    nowrap;
	flex-shrink:    0;
}
.rif-tm-pos--captain {
	background: rgba(245,158,11,.12);
	color:      #b45309;
}
.rif-tm-pos--guard {
	background: rgba(59,130,246,.1);
	color:      #1d4ed8;
}
.rif-tm-pos--forward {
	background: rgba(16,185,129,.1);
	color:      #047857;
}
.rif-tm-pos--center {
	background: rgba(139,92,246,.1);
	color:      #6d28d9;
}

/* ================================================================
   JOIN CTA
   ================================================================ */
.rif-tm-join { position: relative; overflow: hidden; }
.rif-tm-join__bg {
	position:   absolute;
	inset:      0;
	background: linear-gradient(135deg, var(--tm-pink-dark) 0%, var(--tm-pink) 55%, var(--tm-pink-light) 100%);
	z-index:    0;
}
.rif-tm-join__bg::before {
	content:       '';
	position:      absolute;
	top:           -50%;
	right:         -20%;
	width:         70%;
	height:        200%;
	background:    radial-gradient(ellipse, rgba(255,255,255,.13) 0%, transparent 60%);
	border-radius: 50%;
}
.rif-tm-join__bg::after {
	content:       '';
	position:      absolute;
	bottom:        -60%;
	left:          -20%;
	width:         60%;
	height:        180%;
	background:    radial-gradient(ellipse, rgba(0,0,0,.1) 0%, transparent 60%);
	border-radius: 50%;
}

.rif-tm-join__inner {
	position:      relative;
	z-index:       1;
	text-align:    center;
	padding-block: clamp(5rem, 10vw, 8rem);
}

.rif-tm-join__title {
	font-size:      clamp(2.2rem, 5vw, 3.75rem);
	font-weight:    900;
	color:          var(--tm-white);
	line-height:    1.15;
	margin:         0 0 1rem;
	letter-spacing: -.02em;
}
.rif-tm-join__sub {
	font-size:   1.05rem;
	color:       rgba(255,255,255,.82);
	line-height: 1.7;
	margin:      0 auto 2.5rem;
	max-width:   520px;
}
.rif-tm-join__actions {
	display:         flex;
	gap:             1rem;
	flex-wrap:       wrap;
	justify-content: center;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
	.rif-tm-coaches__grid { grid-template-columns: repeat(2, 1fr); }
	.rif-tm-roster__grid  { grid-template-columns: repeat(3, 1fr); }
	.rif-tm-stats-bar__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.rif-tm-hero__title   { font-size: clamp(2.5rem, 9vw, 3.5rem); }
	.rif-tm-coaches__grid { grid-template-columns: repeat(2, 1fr); }
	.rif-tm-roster__grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.rif-tm-coaches__grid   { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
	.rif-tm-roster__grid    { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.rif-tm-stats-bar__grid { grid-template-columns: repeat(2, 1fr); }
	.rif-tm-join__actions   { flex-direction: column; align-items: center; }
}
