/* training.css - page specific styles for Training page */
:root{
    --tr-primary:#0b63f3;
    --tr-dark:#08131f;
    --tr-muted:#64748b;
  }
  
  .tr-hero{
    background: linear-gradient(180deg,rgba(8,13,25,.65),rgba(8,13,25,.65)), url('assets/oilgas.jpg') center/cover no-repeat;
    color:#fff;
  }
  
  .tr-chip{
    display:inline-flex;align-items:center;gap:.5rem;
    border:1px solid #e2e8f0;border-radius:9999px;
    padding:.5rem .875rem;font-weight:600;
    background:#fff;cursor:pointer;user-select:none;
  }
  .tr-chip[aria-pressed="true"]{
    border-color: var(--tr-primary);
    box-shadow: 0 0 0 3px rgba(11,99,243,.15);
  }
  
  .tr-card{
    border:1px solid #e5e7eb;border-radius:1rem;background:#fff;
    box-shadow: 0 10px 20px rgba(2,8,23,.05);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .tr-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(2,8,23,.08); }
  
  .tr-res-badge{
    font-size:.75rem; font-weight:700; color:#0f172a;
    background:#e2e8f0; padding:.25rem .5rem; border-radius:.5rem;
  }
  
  .tr-vid-thumb{
    position:relative; overflow:hidden; border-radius:1rem;
    aspect-ratio:16/9; background:#0b1220;
  }
  .tr-vid-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.9; transition:opacity .2s ease; }
  .tr-vid-thumb:hover img{ opacity:1; }
  .tr-vid-play{
    position:absolute; inset:0; display:grid; place-items:center;
  }
  .tr-vid-play button{
    width:64px; height:64px; border-radius:9999px; border:none;
    background:rgba(255,255,255,.9); box-shadow:0 10px 25px rgba(2,8,23,.2);
    cursor:pointer;
  }
  .tr-vid-play button:after{
    content:''; display:block; margin-left:6px;
    width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid var(--tr-dark);
    transform: translateX(8px);
  }
  
  .tr-modal{
    position:fixed; inset:0; background:rgba(2,8,23,.75);
    display:none; padding:2rem; z-index:50;
  }
  .tr-modal[open]{ display:flex; align-items:center; justify-content:center; }
  .tr-modal-inner{
    width:min(1100px, 92vw);
    background:#000; border-radius:1rem; overflow:hidden;
  }
  .tr-modal-inner iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; }
  .tr-modal-close{
    position:absolute; top:1rem; right:1rem;
    background:#fff; border:none; border-radius:.75rem; padding:.5rem .75rem; font-weight:700; cursor:pointer;
  }
  
  .tr-form .tr-input, .tr-form .tr-textarea, .tr-form .tr-select, .tr-form .tr-file{
    width:100%; border:1px solid #e5e7eb; border-radius:.75rem; padding:.75rem 1rem; background:#fff;
  }
  .tr-form .tr-input:focus, .tr-form .tr-textarea:focus, .tr-form .tr-select:focus, .tr-form .tr-file:focus{
    outline:none; box-shadow:0 0 0 4px rgba(11,99,243,.15); border-color: var(--tr-primary);
  }
  .tr-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.8rem 1.1rem; border-radius:.8rem; border:1px solid transparent; font-weight:700; cursor:pointer;
  }
  .tr-btn-primary{ background:var(--tr-primary); color:#fff; }
  .tr-btn-primary:hover{ filter:brightness(.95); }