/* Everything that isn't Weebly's original theme lives here.
   Loaded after main_style.css, so it wins. */

/* ---------- Recent-films poster grid (index.html) -------------------------
   Each cell is a fixed 4:3 box and the poster is centred inside it, contained.
   That means a poster of ANY shape drops in without touching the markup —
   unlike Weebly's version, which baked each image's aspect ratio into inline
   percentages. Add/replace files in /posters and re-run build.py.            */

.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 940px;
  margin: 0 auto;
}

.poster-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  line-height: 0;
}

.poster-grid img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-sizing: border-box;
  border: 1px solid #5a5a5a;
  padding: 6px;
}

@media screen and (max-width: 760px) {
  .poster-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 460px) {
  .poster-grid { grid-template-columns: 1fr; }
  .poster-grid a { aspect-ratio: auto; }
}

/* ---------- Reel password gate (my-reel.html) ---------------------------- */

#reel-gate[hidden],
#reel-content[hidden],
#reel-video[hidden],
#reel-embed-note[hidden] { display: none !important; }

#reel-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

#reel-password {
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  width: 230px;
  max-width: 70%;
  margin: 0;
  color: #1b1b1b;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

#reel-password::placeholder { color: #999; font-weight: 400; }
#reel-password:focus { outline: 2px solid #28d0d3; outline-offset: 2px; }

#reel-error {
  font-family: "Karla", sans-serif;
  font-size: 16px;
  color: #ff8a80;
  text-align: center;
  margin: 14px 0 0;
}

#reel-embed-note {
  font-family: "Karla", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #9a9a9a;
  text-align: center;
  border: 1px dashed #4a4a4a;
  border-radius: 4px;
  max-width: 640px;
  margin: 20px auto;
  padding: 28px 24px;
}

#reel-embed-note code { color: #ffb92c; font-family: monospace; }

#reel-player { max-width: 1100px; margin: 10px auto 0; }

#reel-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  outline: none;
}

/* ---------- Shot gallery (my-work.html) ----------------------------------
   A scroll-snap carousel: the track is a normal horizontal scroller, so
   trackpad and touch swipes work for free and the arrows just scroll it.   */

.shot-gallery { max-width: 1000px; margin: 0 auto; }

.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track figure {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}

.carousel-track img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #5a5a5a;
  box-sizing: border-box;
}

.carousel-track figcaption {
  font-family: "Karla", sans-serif;
  font-size: 15px;
  color: #b8b8b8;
  text-align: center;
  padding: 10px 6px 0;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 64px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease;
}
.carousel-nav:hover { background: rgba(18, 135, 156, 0.85); }
.carousel-nav:focus-visible { outline: 2px solid #28d0d3; outline-offset: 2px; }
.carousel-nav.prev { left: 0; }
.carousel-nav.next { right: 0; }
.carousel-nav[disabled] { opacity: 0.25; cursor: default; }
.carousel-nav[disabled]:hover { background: rgba(0, 0, 0, 0.45); }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
}
.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #555;
  cursor: pointer;
}
.carousel-dots button[aria-current="true"] { background: #ffb92c; }

@media screen and (max-width: 640px) {
  .carousel-nav { width: 34px; height: 50px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}