/* :root{
--brand:#7A0C15;
--ink:#1E1E1E;
--bg:#FFFFFF;
--muted:#9aa3af;
} */

h3, p {
  text-wrap: balance;
  widows: 2;
  orphans: 2;
}


.resources-wrap .container,
.res-section .container {
  width: min(1250px, 100%);
  margin-inline: auto; 
  padding-inline: 1rem; 
}

.res-section {
    padding-block: clamp(32px, 6vw, 64px);
    background-color: #0b0f16;
  }
.res-grid {
    display: grid;
    grid-template-columns:.9fr 1.3fr;
    gap:3rem;
}

.res-label-wrap{
position: relative;
}

.res-label{
position: sticky;
top: 7rem;
margin: 0;
font-family: 'DM Sans',sans-serif;
font-weight: 800;
text-transform: none;
letter-spacing: .01em;
line-height: 1;
font-size: clamp(2.5rem, 5vw, 3rem);
color: #fff;
transition: color .25s ease;
will-change: color;
}

.res-label.is-active{
color: #C0111F;
}

.res-cards{
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 2.5vw, 1.5rem);
}

.res-card{
background: #0b0f16;
overflow: clip;
}

.res-card-link{
display: grid;
grid-template-rows: auto 1fr;
text-decoration: none;
color: inherit;
}

.res-card-media{
margin: 0;
aspect-ratio: 16/9;
overflow: hidden;
}

.res-card-media img{
width: 100%;
height: 100%;
object-fit: cover;
/* object-position: center center; */
transition: transform .4s ease;
}

/* .res-card-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-bottom: 1px solid rgba(255,255,255,0.08);
} */

.res-card-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* object-position: center center; */
transition: transform .4s ease;
}

.res-card-media.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}


.res-card-body{
padding: 1rem 1rem 1.25rem;
}

.eyebrow{
display: inline-block;
font-family: 'Manrope',sans-serif;
text-transform: uppercase;
letter-spacing: .06em;
font-size: .75rem;
font-weight: 600;
color: #C0111F;
margin-bottom: .35rem;
}

.res-card-title{
font-family: 'DM Sans',sans-serif;
font-weight: 700;
font-size: clamp(1.2rem, 2.2vw, 1.25rem);
line-height: 1.15;
color: #fff;
margin: 0 0 .35rem 0;
}

.res-card-desc{
margin: 0;
color: white;
font-size: 1rem;
}

/*  YouTube  */
.yt-modal {
position: fixed;
inset: 0;
display: none;
place-items: center;
background: rgba(0,0,0,.6);
backdrop-filter: saturate(120%) blur(2px);
z-index: 9999;
}
.yt-modal.open { display: grid; }

.yt-player {
width: min(960px, 92vw);
aspect-ratio: 16/9;
background: #000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
position: relative;
}

/* --- Overlay controls default (MAXIMIZED) --- */
.yt-overlay-controls {
position: absolute;   /* anchor inside the .yt-player */
top: 8px;
right: 8px;
display: flex;
gap: .5rem;
z-index: 2;
opacity: 1;           /* always visible when maximized */
pointer-events: auto;
}
.yt-btn-icon {
border: 1px solid rgba(255,255,255,.18);
background: rgba(14,18,28,.85);
color: #fff;
padding: .45rem .55rem;
border-radius: 10px;
cursor: pointer;
line-height: 1;
}
.yt-btn-icon:hover { background: rgba(14,18,28,1); }

/* --- Minimized dock --- */
.yt-modal.minimized {
background: transparent;
pointer-events: none;
backdrop-filter: none;
}
.yt-modal.minimized .yt-player {
position: fixed; 
bottom: 16px;
right: 16px;
width: 320px;
aspect-ratio: 16/9;
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0,0,0,.35);
pointer-events: auto;
}

.yt-modal.minimized .yt-overlay-controls {
top: 8px;
right: auto;
left: 8px;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
.yt-modal.minimized .yt-player:hover .yt-overlay-controls {
opacity: 1;
pointer-events: auto;
}


/* Which buttons to show per state */
.yt-modal.minimized [data-minimize] { display: none; }
.yt-modal.minimized [data-expand],
.yt-modal.minimized [data-close] { display: inline-flex; }

.yt-modal:not(.minimized) [data-expand] { display: none; } 
.yt-modal:not(.minimized) [data-minimize],
.yt-modal:not(.minimized) [data-close] { display: inline-flex; }

/* Ensure the media sits under the controls */
.yt-frame,
.yt-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: contain;
background: #000;
}

.yt-video::-webkit-media-controls { display: none !important; }
.yt-video::-webkit-media-controls-enclosure { display: none !important; }

.yt-modal.open [data-close] { display: inline-flex; }

/* ===== MP4 card styles ===== */
.res-card-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.res-card-media video,
.res-card-media iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
object-fit: cover;
background: #000;
}

.res-card-media video {
pointer-events: auto;
}

.res-card-media .play-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(0,0,0,0.75);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
}
@media (hover:hover) {
.res-card-media:not(.is-playing) .play-overlay { opacity: 1; visibility: visible; }
}
.res-card-media.is-playing .play-overlay { opacity: 0; visibility: hidden; }

.res-card-media .play-btn {
background: transparent;
border: 0;
cursor: pointer;
z-index: 700;
padding: 0;
display: grid; place-items: center;
}
.res-card-media .play-btn .material-symbols-outlined {
font-size: 64px;

color: #fff;
line-height: 1;
}

.res-card-media .media-ctrl {
position: absolute;
top: .5rem; right: .5rem;
display: flex; gap: .25rem;
z-index: 2;
}
.res-card-media .media-ctrl button {
border: none;
background: rgba(14,18,28,0.8);
color: white;
border-radius: 10px;
padding: .35rem;
cursor: pointer;
display: grid;
place-items: center;
transition: background .2s ease;
}
.res-card-media .media-ctrl button:hover { background: rgba(14,18,28,1); }
.res-card-media .media-ctrl .material-symbols-outlined { font-size: 22px; }

.res-card-media .media-ctrl .close-btn { display: none; }
.res-card-media.minimized .media-ctrl .close-btn,
.res-card-media.maximized .media-ctrl .close-btn { display: grid; }


/* Tablet breakpoint */
@media (max-width: 991px) {
  .res-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  
  .res-label-wrap {
    position: relative;
  }
  .industries-wrap .container,
  .res-section .container {
    padding-inline: 2rem;
    width: auto;
  }
  
  .res-label {
    position: static;
    font-size: clamp(2rem, 7vw, 2.5rem);
    margin-bottom: 1rem;
  }
  
  .res-section {
    padding-block: clamp(24px, 5vw, 48px);
  }
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  .resources-wrap .container,
  .res-section .container {
    padding-inline: 1.3rem;
    width: auto;
  }
  
  .res-grid {
    gap: 1.5rem;
  }
  
  .res-label {
    font-size: 1.75rem;
  }
  
  .res-cards {
    gap: 1rem;
  }
  
  .res-card-body {
    padding: 0.875rem;
  }
  
  .res-card--text p {
    font-size: .9rem;
  }
  
  .res-card-title {
    font-size: 1.1rem;
  }
  
  .res-card-desc {
    font-size: 0.9rem;
  }
  
  .eyebrow {
    font-size: 0.7rem;
  }

    /* Adjust video player on mobile */
    .yt-player {
      width: 95vw;
      border-radius: 8px;
    }
    
    /* Minimized player on mobile */
    .yt-modal.minimized .yt-player {
      width: 280px;
      bottom: 12px;
      right: 12px;
    }
    
    .yt-overlay-controls {
      gap: .35rem;
    }
    
    .yt-btn-icon {
      padding: .35rem .45rem;
      font-size: 0.875rem;
    }
    
    /* Play button on mobile */
    .res-card-media .play-btn .material-symbols-outlined {
      font-size: 48px;
    }
    
    .res-card-media .media-ctrl {
      top: .35rem;
      right: .35rem;
    }
    
    .res-card-media .media-ctrl .material-symbols-outlined {
      font-size: 18px;
    }

}

/* Small mobile breakpoint */
@media (max-width: 480px) {
  .res-label {
    font-size: 1.7rem;
  }
  
  .res-card-title {
    font-size: 1.3rem;
  }
  
  .res-card-desc {
    font-size: 0.85rem;
  }
  .yt-modal.minimized .yt-player {
    width: 240px;
    bottom: 8px;
    right: 8px;
  }
  
}

/* HERO */
 /* ===== HERO SECTION ===== */
 .hero {
  position: relative;
  min-height: 40vh;
}

.hero-media {
  position: absolute;
  inset: 0;  
  z-index: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 8%;
  color: #fff;
  background: rgba(0,0,0,.5);
  
}

.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  letter-spacing: 0.08em;
  text-transform:capitalize;
  color: #fff;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.hero-overlay h1 {
  text-transform: capitalize;
  font-size: clamp(2rem, 8vw, 3rem);
  margin: 0 0 0.75rem;
  font-family: Arial, Helvetica, sans-serif;
  opacity: .9;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  line-height: 1.2;
}

.hero-content-split {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
}

.hero-left {
flex: 1;
max-width: 500px;
}

.hero-left h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: #fff;
}

.hero-left .button {
display: inline-block;
padding: 0.875rem 2rem;
background: #C0111F;
color: #fff;
text-decoration: none;
border-radius: 999px;
font-weight: 500;
display: inline-flex;
align-items: center;
opacity: .8;
font-size: .9rem;
transition: background 0.3s ease;
}

.hero-left .button:hover {
background: #7A0C15;
}

.hero-left .button .arrow-icon {
font-size: 20px;
transition: transform 0.3s ease;
}

.hero-left .button:hover .arrow-icon {
transform: rotate(90deg);
}

.hero-right {
flex: 1;
max-width: 500px;
}

.hero-box {
padding-left: 2rem;
/* text-align: end; */

}

.hero-box .lead {
font-size: 1.125rem;
line-height: 1.7;
color: white;
margin: 0;
}

@media (max-width: 768px) {
  .hero {
    min-height: 35vh;
  }


  .hero-overlay {
    padding: 5%;
    padding-bottom: 2rem;
  }

  .hero-box {
    padding: 0;
  }

  .hero-overlay h1 {
    font-size: 2rem;
  }
  
  .hero-overlay .lead {
    font-size: 1.1rem;
    line-height: 1.3rem;
  }

  .hero-eyebrow {
    font-size: 0.7rem;
    margin-bottom: 0.35rem;
  }
  .hero-overlay .button {
    padding: 0.5rem 1rem;
    font-size: .7rem;
  }

}


/* ===== VERY SMALL MOBILE (max 480px) ===== */
@media (max-width: 480px) {
  .hero {
    min-height: 30vh;
  }

  .hero-overlay {
    padding: 0 1.25rem;
    padding-bottom: 1.5rem;
  }

  .hero-overlay h1 {
    font-size: 1.5rem;
  }
  
  .hero-overlay .lead {
    font-size: .8rem;
    line-height: 1.1rem;
  }
  .hero-overlay .button {
    padding: 0.4rem .5rem;
    font-size: .7rem;
  }

}

/* ===== VERY SMALL MOBILE (max 360px) ===== */
@media (max-width: 360px) {
  .hero-overlay {
    padding: 0 1rem;
  }
}