/* ===== Home Portfolio Cards – Override Only ===== */
:root {
  --accent-cyan: #28aae1;
  --accent-overlay: rgba(40,170,225,0.3);
}

/* Base card spans full viewport width but content is centered */
.card {
  width: 100%;
  position: relative;
  overflow: visible;
  z-index: 5;                 /* below navbar (1000) */
}

.card-inner {
  width: 60%;                 /* keep overall card narrower */
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
	 box-sizing:border-box;
	word-break: normal;          /* prevents splitting within a word              */
  overflow-wrap: break-word;   /* will wrap the whole word to the next line     */
  hyphens: auto;   
}

/* Remove card drop-shadow / lift, we only shadow the video */
.card:hover { transform: none; box-shadow: none; }

/* Cyan highlight overlay, fills the viewport width */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--accent-overlay);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;               /* keep behind content */
}
.card:hover::before { opacity: 1; }

/* ---- Layout variants (desktop / tablet) ---- */
.card-left  .card-inner { flex-direction: row; }
.card-right .card-inner { flex-direction: row-reverse; }

/* Split: video 45%, text 55% */
.card .video-container {
  flex: 0 0 55%;
}
.card .text-container  {
  flex: 1 1 45%;
  padding: 0 2rem;
  min-width: 0;
}

.card-left  .text-container { text-align: left;  }
.card-right .text-container { text-align: right; }

/* Video appearance with drop-shadow */
.card .video-container video {
  width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

/* Text styling */
.line1 {
  font: 900 14px/1 'Roboto', sans-serif;
  margin: 0 0 4px 0;
  color: var(--accent-cyan);
}
.line2 {
  font: 400 28px/1.15 'Roboto', sans-serif;
  margin: 0 0 10px 0;
word-break: normal;      /* never split inside a word            */
overflow-wrap: normal;   /* wrap only at normal break-points     */
}
.line3-button {
  display: inline-block;
  background: var(--accent-cyan);
  color: #ffffff !important; 
  font: 14px/1 'Roboto', sans-serif;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s;
}
.line3-button:hover { background: #0e8fc3; }

/* Reveal animation */
.card.hidden { opacity: 0; transform: translateY(30px); }
.card.show   { opacity: 1; transform: translateY(0); transition: all .6s ease; }

/* ---- RESPONSIVE (≤ 1024 px) ---- */
@media (max-width: 1024px) {
	.card{
    margin-bottom:24px;
  }
  /* Stack EVERY card the same way: video on top, text below */
  .card-inner,
  .card-left  .card-inner,
  .card-right .card-inner {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0 10px;
	  
	/* Mobile drop-shadow & white background */
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
    background: #ffffff;
    border-radius: 6px;
  }

  .card .video-container,
  .card .text-container {
    flex: none;
    width: 100%;
    margin: 10px 0;
    padding: 0;
  }

  /* ensure text follows video */
  .card .video-container { order: 1; }
  .card .text-container  { order: 2; }
}


/* home-cards.css (or the file that styles the project titles) */
.card-title,              /* adjust to your selector */
.card-inner h3 {          /* example: the element that shows Underground Mining */
  /* stop mid-word breaks */
  word-break: normal;          /* prevents splitting within a word              */
  hyphens: auto;               /* optional: lets the browser add "Mini-" if needed */
}

/* === 2025-07-02 • mobile hard-override === */
@media (max-width: 767px){

  /* 1️⃣  FORCE every card to stack */
  .card-inner,
  .card-left .card-inner,
  .card-right .card-inner{
    flex-direction: column !important;   /* beat the row / row-reverse rules */
    width: 100%       !important;
  }

  /* 2️⃣  Let the navbar links wrap instead of stretching the page */
  navbar .nav-center{
    flex-wrap: wrap;
    gap: .25rem;
    padding-right: .75rem;   /* breathe on the right edge */
  }
}