/* ============================================================
   HealthCareerSK.ca Custom CSS
   Purpose: Site-specific customizations and utility overrides
   Author: Amplify / HealthCareerSK
   Notes:
   - Add custom styles below Bootstrap/WebInOne core styles.
   - Keep this file reserved for site-specific refinements.
   - Avoid modifying vendor CSS directly.
   ============================================================ */


/* ============================================================
   Bootstrap Ratio Utilities
   ============================================================ */

/*
   Adds support for vertical/portrait 9:16 embedded media.

   Usage:
   <div class="ratio ratio-9x16">
     <iframe src="..." title="..." allowfullscreen></iframe>
   </div>

   Bootstrap's ratio utility calculates height as a percentage
   of width. For 9:16 portrait video:

   16 / 9 * 100 = 177.777777778%
*/

.ratio.ratio-9x16 {
  --bs-aspect-ratio: 177.777777778%;
}


/* ============================================================
   Embedded Video Defaults
   ============================================================ */

/*
   Optional helper class for embedded video blocks.

   Usage:
   <div class="video-embed">
     <div class="ratio ratio-16x9">
       <iframe src="..." title="..." allowfullscreen></iframe>
     </div>
   </div>
*/

/*
.video-embed {
  margin-block: 1.5rem;
}

.video-embed iframe,
.video-embed video {
  border: 0;
}
*/


/* ============================================================
   Portrait Video Helpers
   ============================================================ */

/*
   Optional wrapper for portrait videos where you want the video
   to stay visually contained and not become too large on desktop.

   Usage:
   <div class="video-embed video-embed-portrait">
     <div class="ratio ratio-9x16">
       <iframe src="..." title="..." allowfullscreen></iframe>
     </div>
   </div>
*/

/*
.video-embed-portrait {
  max-width: 420px;
  margin-inline: auto;
}
*/

/* ============================================================
   Future Customizations
   ============================================================ */

/*
   Add future HealthCareerSK custom CSS below this line.
*/