/*
 * Port-specific CSS overrides.
 * Classes here carry `!important` declarations moved out of inline
 * styles during the Django template -> JSX conversion (JSX inline
 * `style` objects cannot express `!important`).
 */

/* templates/components/nav.html:3 — top contact line */
.nav-contact-text {
  font-size: 14px !important;
}

/* templates/pages/home_page.html:16,20 — carousel image */
.carousel-img-port {
  height: 80vh !important;
  min-width: 100% !important;
  background-size: cover !important;
  background-repeat: no-repeat;
}

/* templates/pages/history_page.html:4, mission_page.html:4, principal_page.html:5 */
.min-vh-70-port {
  min-height: 70vh !important;
}

/* templates/pages/alumni.html:7 */
.min-vh-90-port {
  min-height: 90vh !important;
}

/* Public gallery: timeline, album tiles and lightbox (components/gallery). */
.g-page { --g-navy: #121428; --g-line: rgba(18, 20, 40, 0.14); --g-accent: #c9861a; }

.g-back { display: inline-block; margin-bottom: 12px; color: var(--g-accent); font-weight: 500; }

.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.g-chips button {
  background: none; border: 1px solid var(--g-line); border-radius: 4px;
  padding: 4px 12px; font-size: 0.9rem; color: inherit;
}
.g-chips button[aria-pressed="true"] { background: #fbefd8; border-color: var(--g-accent); color: var(--g-navy); }

.g-era { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--g-line); margin-top: 16px; }
.g-era > h3 { font-family: "Josefin Sans", sans-serif; font-weight: 300; font-size: 1.8rem; margin: 0; }
.g-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 14px; align-items: start; }
/* The album page has the full width, so its photos are larger. */
.g-strip-lg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 575px) {
  .g-era { grid-template-columns: 1fr; }
  .g-strip { grid-template-columns: repeat(2, 1fr); }
}

.g-tile { margin: 0; }
.g-tile figcaption { font-size: 0.8rem; line-height: 1.35; color: #5b5f7a; padding-top: 6px; }
.g-photo { display: block; width: 100%; padding: 0; border: 0; background: #e6e7ee; border-radius: 6px; overflow: hidden; cursor: zoom-in; }
.g-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; transition: transform 0.3s; }
.g-photo:hover img { transform: scale(1.04); }
.g-photo:focus-visible, .g-album:focus-visible, .g-chips button:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }

/* auto-fit + a capped width keeps one or two albums centred instead of stranded on the left. */
.g-albums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); justify-content: center; gap: 28px 22px; --g-accent: #c9861a; }
/* Home page: the "Latest Information" cards and the gallery tiles share this
   narrower, centred width, so the cards are not overly wide on a large screen. */
.home-row { margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  /* 86% trims the cards on a laptop; 1000px stops them growing on a big monitor. */
  .home-row { max-width: min(1000px, 86%); }
}

/* Home page gallery row: the same three columns and 1.5rem gutter as the news
   cards above it (Bootstrap row g-4 / col-md-4), so the edges line up. */
.g-albums-home { grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
  .g-albums-home { grid-template-columns: repeat(3, 1fr); }
}
.g-album { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.g-album:hover { color: inherit; }
.g-album b { font-family: "Josefin Sans", sans-serif; font-weight: 400; font-size: 1.1rem; color: #121428; margin-top: 8px; }
.g-album small { color: #5b5f7a; }
.g-album-cover { position: relative; display: block; aspect-ratio: 4 / 3; }
.g-album-cover > * {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(10, 12, 40, 0.25); background: #d9dbe6;
  transition: transform 0.25s;
}
.g-album-cover img { object-fit: cover; }
.g-album-cover-single img { object-position: center 30%; }
.g-album > small:nth-child(2) { margin-top: 8px; }
.g-album-cover span:nth-child(1) { transform: rotate(-4deg) translate(-4px, 2px); }
.g-album-cover span:nth-child(2) { transform: rotate(3deg) translate(5px, 0); }
.g-album:hover .g-album-cover span:nth-child(1) { transform: rotate(-7deg) translate(-9px, 2px); }
.g-album:hover .g-album-cover span:nth-child(2) { transform: rotate(6deg) translate(10px, 0); }

.g-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: rgba(6, 7, 18, 0.96); color: #fff; }
.g-lightbox-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-variant-numeric: tabular-nums; }
.g-lightbox-top button, .g-lightbox-nav {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.2rem; line-height: 1;
}
.g-lightbox-top button:hover, .g-lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.g-lightbox button:focus-visible { outline: 3px solid #e9a93c; outline-offset: 2px; }
.g-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.g-lightbox-stage img { flex: 1; min-width: 0; height: 100%; object-fit: contain; }
.g-lightbox-caption { margin: 0; padding: 10px 20px; text-align: center; }
.g-lightbox-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 14px; justify-content: safe center; }
.g-lightbox-thumbs button { flex: none; padding: 0; border: 0; background: none; opacity: 0.45; border-radius: 3px; overflow: hidden; }
.g-lightbox-thumbs button.is-current { opacity: 1; outline: 2px solid #e9a93c; }
.g-lightbox-thumbs img { display: block; width: 56px; height: 42px; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .g-photo img, .g-album-cover > * { transition: none; }
}

#galleryModal .modal-content {
  background-color: rgba(0, 0, 0, 0.9) !important;
}