/* 
Theme Name: Gold Nugget Designs
Theme URI: https://www.goldnuggetdesigns.co.uk/
Description: Bespoke WordPress Website created by and for Gold Nugget Designs
Author: Gold Nugget Designs
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
.highlightcol
{
	color:#33CDB7;
}
.hightlight2
{
	color:#37474F!important;
}

/* Presenter credits */

.credits-block { margin: 3rem 0; }
.credits-title { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 1.25rem; }

.credits-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px){ .credits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .credits-grid { grid-template-columns: repeat(3, 1fr); } }

.credit-card {
  background: #33CDB7; /* tweak to suit */
  border: 1px solid rgba(255,255,255,.1);
  padding: 16px;
  border-radius: 14px;
}

.credit-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.credit-title {
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.credit-title:hover { text-decoration: underline; }

.credit-year { font-size: .9rem; opacity: .8; }

.credit-meta { display: grid; gap: 4px; }
.credit-role, .credit-platform { font-size: .95rem; opacity: .9; }



/* VIDEO GRID LAYOUT */
.videos-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px){ .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .videos-grid { grid-template-columns: repeat(3, 1fr); } }

.video-card {
  background:#0f1220;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:12px;
}


/* STANDARD 16:9 VIDEO TILES */
.video-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

/* Make the embed fill the 16:9 box, no cropping hacks */
.video-aspect iframe,
.video-aspect .video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover; /* safe for <video>, ignored by iframes */
}

/* Remove any previous width overrides from the square layout */
.videos-grid iframe { max-width: 100%; }

/* Mobile inherits the same 16:9 behaviour */
@media (max-width: 640px){
  .video-aspect { aspect-ratio: 16 / 9; }
  .video-aspect iframe,
  .video-aspect .video-el {
    transform: none;
  }
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .video-aspect { height: 0; padding-bottom: 56.25%; } /* 16:9 */
  .video-aspect > iframe,
  .video-aspect > .video-el {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
}

/* VIDEO GRID — single source of truth */
.videos-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));   /* mobile: 1 col */
}
@media (min-width: 768px){
  .videos-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .videos-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Prevent children from blowing the grid width */
.videos-grid > * { min-width: 0; }

/* mobile fix */
/* === VIDEO GRID — single source of truth === */
.videos-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));  /* mobile: 1 col */
}
@media (min-width: 640px){
  .videos-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .videos-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cards */
.video-card{
  background:#0f1220;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:12px;
  min-width:0;               /* prevent children from blowing width */
  overflow:visible;           /* allow iframe to render fully */
}

/* Aspect ratio wrapper */
.video-aspect{
  position:relative;
  width:100%;
  aspect-ratio:16/9;          /* reserves height on mobile */
  min-height:200px;           /* iOS/Safari safety net */
  overflow:hidden;
  border-radius:10px;
}

/* Fill the wrapper */
.video-aspect iframe,
.video-aspect .video-embed,
.video-aspect video,
.video-aspect .video-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1){
  .video-aspect{ height:0; padding-bottom:56.25%; }
  .video-aspect > iframe,
  .video-aspect > .video-el{ position:absolute; inset:0; width:100%; height:100%; }
}

/* Elementor/widget container growth + footer overlap guard */
.elementor-widget-shortcode .elementor-widget-container,
.presenters-showreel{ 
  display:block;
  height:auto !important; 
  min-height:0 !important; 
  overflow:visible !important;
}
footer, .site-footer{ position:relative; z-index:1; }
.presenters-showreel{ position:relative; z-index:2; }

/* space for the sticky bar on phones */
@media (max-width: 767px){
  .presenters-showreel{ padding-bottom: 110px; }
}

/* FINAL OVERRIDES — place LAST in stylesheet */
.elementor .elementor-widget-shortcode .videos-grid{
  display:grid !important;
  gap:16px !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;  /* mobile: 1 */
}

@media (min-width: 768px){
  .elementor .elementor-widget-shortcode .videos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* tablet: 2 */
  }
}

@media (min-width: 1024px){
  .elementor .elementor-widget-shortcode .videos-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* laptop+: 3 */
  }
}

/* guard against children forcing extra width */
.videos-grid > *{ min-width:0 !important; }

/* end mobile fix */