/* campionstyle.css — Sillages unified stylesheet (v2025-10-04d)
   - Dreamweaver-safe (no 'fr' units)
   - Modern video grid + legacy fallbacks
   - Reliable poster overlay (thumbnail) above videos
   - Consistent row spacing on all screens
*/

/* ===== Base ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: #333333;
  background-image: url('images/background-static.gif');
  background-repeat: no-repeat;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.2em;
  color: #ffffff;
  margin: 0.1em;
}

a:link, a:visited, a:active { text-decoration: none; color: #FF9900; }
a:hover { text-decoration: underline; color: #FF9900; }

td, th { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

.bodystyle { font-size: 13px; line-height: 20px; letter-spacing: 0.1em; }
.small { font-size: 10px; }
.medium { font-size: 12px; }
.big { font-size: 16px; line-height: 20px; letter-spacing: 0.1em; }
.xbig { font-size: 24px; }
.expanded { font-size: 12px; line-height: 24px; letter-spacing: 2px; }

.justified { text-align: justify; }
.footer { font-size: 9px; color: #999999; }

/* Section wrapper */
.stephen_box {
  width: 600px;                /* legacy desktop width */
  background-color: #3e596f78;
  border-radius: 10px;
  margin: 20px 0;
  overflow: hidden;
  padding: 10px;
}

a img { display: block; height: auto; max-width: 100%; }

/* Images in content sections */
tr.section td img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-bottom: .5rem;
}

img[src*="title.gif"] { margin-bottom: 0 !important; }
img[id^="campionmenu_"],
img[src*="campion-menu_"],
img[src*="campion-menu"] {
  margin-bottom: 0 !important;
  display: block;
}

/* ===== Story / text block ============================================== */
#story { hyphens: auto; }
#story p { line-height: 1.5; text-align: left; text-align-last: left; word-break: normal; }
#story p.one_para { margin: 0 0 .7em 0; }
#story p.two_para  { margin: 0; }
#story p + br { display: none; }
#story .two_para p { margin: 0 0 1.25rem; }
#story .two_para p:last-child { margin-bottom: 0; }

/* ===== Image section (captions under images) =========================== */
tr.section.images .image_box .item_title { clear: left; }
tr.section.images .image_box > img[id^="image_section_"] {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
tr.section.images .image_box > p.item_title {
  clear: both;
  margin: 10px 0 1.25rem 0;
  text-align: left;
}

.caption,
.imgtitle,
.imagetitle,
.image-title,
.image_caption {
  display: block;
  margin-top: .5rem;
  margin-bottom: 1.25rem;
  clear: both;
}

/* ===== Audio section ==================================================== */
.sound_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  margin-bottom: 10px;
  max-width: 100%;
  box-sizing: border-box;
}
.sound_box audio {
  width: 100%;
  max-width: 600px;
  display: block;
  margin-bottom: 10px;
  height: 36px;
}
.sound_box p.item_title {
  margin: 0;
  padding-top: 5px;
  font-size: 1em;
  line-height: 1.4;
  color: #ffffff;
  width: 100%;
  word-wrap: break-word;
  box-sizing: border-box;
  text-align: center;
}

/* ===== Documents ======================================================== */
.pdf_box { width: 100px; float: left; margin: 15px; }
.icon_box { width: 100%; text-align: center; }
.icon_box img { width: 100px; padding: 2px 20px; }
p.pdf_thumb {
  font-size: 1em;
  line-height: 1.3;
  color: #999999;
  font-weight: bold;
  margin: 7px 0 0;
  text-align: left;
  width: 110%;
  margin-left: 20%;
}

/* ======================================================================= */
/* =========================== VIDEO LAYOUT ============================== */
/* ======================================================================= */

/* Modern, equal-spacing layout — DW-friendly columns */
.stephen_box.video-grid {
  display: grid;
  grid-template-columns: calc((100% - 16px)/2) calc((100% - 16px)/2);
  gap: 16px;
  row-gap: 1.25em; /* ≈ one text line */
  padding-bottom: 6px; /* tiny breathing room at bottom */
}

/* Strong neutralization of legacy floats within the grid */
.stephen_box.video-grid [id^="video_section_"] {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Featured or expanded tiles span full width */
.stephen_box.video-grid #video_section_1,
.stephen_box.video-grid [id^="video_section_"].open {
  grid-column: 1 / -1;
}

/* Default media behavior inside grid */
.stephen_box.video-grid video {
  display: block;
  width: 100%;
  height: auto;
}

/* Even small-tile height for closed items (if video metadata is late) */
.stephen_box.video-grid [id^="video_section_"].closed video {
  aspect-ratio: 16 / 9;
}

/* Minimal text margins inside tiles */
.stephen_box.video-grid p.viewMore,
.stephen_box.video-grid p.item_title {
  margin: 8px 0 0 0;
  padding: 0;
}

/* Legacy float layout (fallback for older pages not using .video-grid) */
[id*="video_section_"] {
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 1.25em; /* normalized */
}

/* ======================================================================= */
/* ===================== POSTER OVERLAY / THUMBNAIL ====================== */
/* ======================================================================= */

/* Ensure the wrapper has height BEFORE video metadata arrives */
.video-wrap {
  aspect-ratio: 16 / 9;     /* adjust if your source isn’t 16:9 */
  background: #000;
  position: relative;
  overflow: hidden;
}

/* Make the <video> fill the box, beneath the overlay */
.video-wrap > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* or 'cover' for edge-to-edge crop */
  display: block;
  border-radius: inherit;
  z-index: 0;
}

/* Clickable overlay sits on top and is visible by default */
.video-wrap > .video-overlay {
  /* Reset default button chrome to eliminate thin white borders/margins */
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;

  position: absolute;
  inset: 0;
  z-index: 3;               /* above video and native controls */
  display: block;
  opacity: 1;
  pointer-events: auto;
  border-radius: inherit;
  transition: opacity .25s;
  cursor: pointer;
}

.video-wrap > .video-overlay picture,
.video-wrap > .video-overlay img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* fill nicely */
  border-radius: inherit;
}

/* ======================================================================= */
/* ========================= RESPONSIVE LAYER ============================ */
/* ======================================================================= */

@media (max-width: 900px) {
  html, body { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

  /* Keep outer table fluid */
  table[width="849"] { width: 100% !important; max-width: 100% !important; table-layout: auto; }

  /* Content boxes expand */
  .stephen_box { width: 100% !important; margin: 10px 0; }

  /* Fluid media */
  .stephen_box video { width: 100% !important; height: auto !important; }
  img { max-width: 100%; height: auto; }

  /* Images section: single column */
  [id*="image_section_"] { width: 100% !important; padding: 0 !important; float: none !important; }

  /* Video tiles should not reintroduce float widths */
  [id*="video_section_"] { float: none; width: auto !important; padding: 0 !important; margin: 0 !important; }
  [id*="video_section_"].closed, [id*="video_section_"].open { min-height: 0; height: auto; margin-bottom: 1.25em; }

  /* On narrow screens, make the grid a single column */
  .stephen_box.video-grid { grid-template-columns: 100%; gap: 16px; row-gap: 1.25em; }
}

/* ======================================================================= */
/* ============================= DEBUG BADGE ============================= */
/* ======================================================================= */
@media screen {
  html:before {
    content: "CSS v2025-10-04d";
    position: fixed;
    right: 6px;
    bottom: 6px;
    z-index: 2147483647;
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 2px 6px;
    font: 12px/1 Arial, Helvetica, sans-serif;
    pointer-events: none;
    border-radius: 4px;
  }
}




/* Eliminate legacy inner focus padding on Firefox buttons */
.video-wrap > .video-overlay::-moz-focus-inner { border: 0; padding: 0; }

/* Keep an accessible focus indicator */
.video-wrap > .video-overlay:focus-visible { outline: 2px solid #FF9900; outline-offset: 2px; }


/* === Expanded tile video fit (avoid cropping in open/featured) — v2025-10-04d=== */
.stephen_box.video-grid [id^="video_section_"].open .video-wrap > video {
  object-fit: contain;
}


/* === Safari/legacy fallback for video poster sizing (intrinsic 16:9) — v2025-10-04d=== */
@supports not (aspect-ratio: 1 / 1) {
  .video-wrap { position: relative; height: 0; padding-top: 56.25%; overflow: hidden; }
  .video-wrap > * { position: absolute; inset: 0; width: 100%; height: 100%; }
}


/* === Phone left-nav widths (approved baseline) — v2025-10-04d=== */
@media (max-width: 900px) {
  td#leftNav { width: 114px; } /* portrait */
}
@media (max-width: 900px) and (orientation: landscape) {
  td#leftNav { width: 101px; } /* landscape */
}