/*
  photos.css

  Mobile-first styles for the Photos section (landing table, collection
  grid, and full-screen viewer). Uses utility-like class names described
  in the generator templates. Responsive breakpoints at 640px and 980px.
*/

/* -----------------------------
   Utility & base styles
   ----------------------------- */
:root {
  --photos-border: #e5e5e5;
  /* subtle hover tint that sits on the page background (page bg #f5f1eb) */
  --photos-hover: rgba(0,0,0,0.03);
  --muted: #666666;
  --muted-2: #888888;
  --brand-blue: #2563eb;
}

/* Hide Quarto's generated title block on photos pages (prevents duplicate H1)
  This is intentionally specific to the photos stylesheet so it doesn't
  affect other sections. */
#title-block-header { display: none !important; }

* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Photos page: Remove body padding on mobile */
@media (max-width: 768px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Disable horizontal scroll on the wrapper */
.overflow-x-auto {
  overflow-x: visible !important;
  overflow: visible !important;
}

/* Hide colgroup fixed widths */
.collections-table colgroup,
.collections-table col {
  width: auto !important;
}
.collections-table col[style] {
  width: auto !important;
}

/* -----------------------------
   1) LANDING PAGE - TABLE STYLES
   Mobile-first (count column hidden by utility classes)
   ----------------------------- */
.collections-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  /* Remove the outer table border so the photos table doesn't render
     as a boxed element; keep internal row separators via `tbody tr` borders. */
  border: none;
  /* Let the table background inherit the page so it visually sits on the
     same surface as the rest of the Photos page (page background: #f5f1eb). */
  background: transparent;
  /* Small gap under the fixed header on mobile; increased at larger widths.
    Kept responsive so mobile screens retain compact layout. */
  margin-top: 1.75rem;
  /* No horizontal margin - padding handled by cells */
  margin-left: 0;
  margin-right: 0;
}

/* Reduce the table width on larger viewports so it doesn't span the
   full content width; center it. On small screens keep it full width. */
@media (min-width: 640px) {
  .collections-table {
    max-width: 1400px; /* increased to allow wider table on large viewports */
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.5rem;
  }
}

/* Ensure the table header container itself uses the same border weight
   as the row borders. The site-wide `thead` rule in `custom.css` sets a
   2px border, so make this selector specific to the photos table to
   override that without changing global styles. */
.collections-table thead {
  /* Match the site page header weight/color so this divider reads as
     part of the page chrome rather than a faint table rule. */
  border-bottom: 1px solid #1a1a1a;
}

.collections-table thead th {
  /* Match body cell padding so headers align exactly over content. */
  padding: 0.9rem 0.75rem;
  /* Vertically center header content so header text lines up with
    body cell content (browsers default th vertical-align to bottom).
    This makes the 2nd/3rd column titles align the same way the
    1st column title already does. */
  vertical-align: middle;
  font-weight: 600;
  /* Use the HTML-provided casing (e.g. "Collection") instead of forcing
    site-wide UPPERCASE. Quarto/global styles set `th { text-transform: uppercase; }`.
    Disable that for the photos table so only the first-letter remains capitalized
    (as emitted by the generator). */
  text-transform: none;
  background: transparent;
  /* Remove the per-cell bottom border so we don't visually double the line
    when the thead also has a border. The single thead border will control
    the divider's weight and color. */
  border-bottom: none;
  text-align: left;
}

/* Edge alignment: remove left padding from the first column and right padding
   from the last column (both header and body) so their content touches the
   table edges. Keep other columns' padding intact. */
.collections-table thead th:first-child,
.collections-table tbody td:first-child {
  padding-left: 0;
}

.collections-table thead th:last-child,
.collections-table tbody td:last-child {
  padding-right: 0;
}

/* Force the last column's body cells to have no right padding and ensure
   the preview thumbnail container fills the cell so thumbnails sit flush
   against the table's right edge. Use a scoped rule to avoid affecting
   other tables on the site. */
.collections-table tbody td:last-child {
  padding-right: 0 !important;
}
.collections-table td:last-child .preview-thumbnails {
  width: 100%;
  justify-content: flex-end; /* align thumbnails to the cell's right edge */
  margin-right: 0;
}

/* Adjust individual header alignments at larger breakpoints */
.collections-table thead th.count-col { text-align: center; }
.collections-table thead th.preview-col { text-align: right; }

/* Ensure only the final header cell (Photos) is right-aligned. Use a
  scoped :last-child selector so other headers keep their alignment. */
.collections-table thead th:last-child { text-align: right; }

/* Ensure body cells in the same columns match header alignment so
  column titles sit directly over their content (e.g. 'Count' above
  the numeric values). This prevents the visual offset you observed. */
.collections-table tbody td.count-col { text-align: center; }
.collections-table tbody td.preview-col { text-align: right; }

.collections-table tbody tr {
  cursor: pointer;
  transition: background-color 0.18s ease;
  /* Slightly heavier row separators so table rows read more distinctly
     from one another without touching the thead divider. Kept color via
     variable for easy global adjustment. */
  border-bottom: 1.5px solid var(--photos-border);
  background: transparent; /* rows sit on page background */
}

/* Remove border from last row - use !important to override both CSS and Tailwind classes */
.collections-table tbody tr:last-child,
.collections-table tbody tr:last-child.border-b {
  border-bottom-width: 0 !important;
  border-bottom: none !important;
}

.collections-table tbody tr:hover {
  /* Darken the hover a bit so row highlighting is clearer. Keep this
     scoped to the photos table to avoid changing other hover uses. */
  background: rgba(0,0,0,0.06);
}

.collections-table td {
  /* Reduced vertical padding to decrease row height while keeping
     comfortable horizontal spacing. This only affects body cells; thead
     padding remains unchanged so header spacing is preserved. */
  padding: 0.9rem 0.75rem;
  vertical-align: middle;
  /* Disable top borders on cells created by global table rules so we only
     see the intentional `tbody tr` bottom borders (single-line separators). */
  border-top: none;
  background: transparent;
}

.collection-name {
  /* Use the table's inherited font size so collection titles match other
     table content exactly. Also remove the extra bottom margin to vertically
     align titles with surrounding content. */
  font-size: inherit;
  /* Match the regular table content weight so collection titles don't appear bolder */
  font-weight: 400;
  margin-bottom: 0;
}

/* Use IBM Plex Mono for collection titles to match site monospace styling */
.collections-table .collection-name {
  font-family: 'IBM Plex Mono', monospace;
}

.collection-meta {
  font-size: 0.9rem;
  color: var(--muted);
}

.collection-count-mobile {
  font-size: 0.85rem;
  color: var(--muted-2);
  margin-top: 0.25rem;
}

/* Hide collection meta and mobile count inside the landing-page table's first column
   (the generator should ideally omit these, but some rendering steps may still
   inject them; this CSS ensures the Collection column displays only the title). */
.collections-table td .collection-meta,
.collections-table td .collection-count-mobile {
  display: none !important;
}

.preview-thumbnails {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.preview-thumb {
  /* slightly reduced preview image height to help lower row height */
  height: 72px;
  width: auto;
  object-fit: cover;
  /* remove rounded corners per request */
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* 4:3 thumbnail wrapper */
.thumb-4-3 { display: inline-block; height: 96px; aspect-ratio: 4/3; overflow: hidden; border-radius: 0; }
.thumb-4-3 img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

/* Collection grid thumbnails (remove rounding here too) */
.photo-grid-item img, .photo-grid a.photo-grid-item img { border-radius: 0; }

/* -----------------------------
   2) COLLECTION PAGE - GRID STYLES
   ----------------------------- */
.collection-header { 
  margin-bottom: 2rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.back-link { color: var(--brand-blue); text-decoration: none; margin-bottom: 1rem; display: inline-block; }
.back-link:hover { text-decoration: underline; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* Increased gap for more breathing room between thumbnails */
  gap: 20px;
  margin-bottom: 2rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.photo-grid .photo-grid-item,
.photo-grid a.photo-grid-item,
.photo-grid figure { display: block; overflow: hidden; }

/* --- Collection-specific: preserve original aspect ratio for thumbnails ---
   The generator reuses the `.thumb-4-3` wrapper for both table previews and
   collection grid thumbnails. For the grid we want the image's intrinsic
   aspect ratio preserved, so override the fixed 4:3 sizing here. */
.photo-grid .thumb-4-3 {
  display: block;
  height: auto;       /* let image determine height */
  aspect-ratio: auto; /* remove forced 4:3 */
  overflow: visible;  /* avoid cropping the image */
}
.photo-grid .thumb-4-3 img {
  width: 100%;
  height: auto;       /* preserve original aspect ratio */
  object-fit: contain; /* avoid cropping while preserving ratio */
}

.photo-grid-item { display:block; overflow:hidden; cursor:pointer; transition: opacity 0.2s ease; }
.photo-grid-item:hover { opacity: 0.95; }
.photo-grid-item img { width: 100%; height: auto; display: block; }

/* -----------------------------
   3) PHOTO VIEWER - FULL-SCREEN STYLES
   ----------------------------- */
.photo-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #f5f1eb;
  z-index: 9999;
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.photo-viewer.active { display: flex; }

/* Header takes ~50px */
.viewer-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #f5f1eb;
  color: #1a2535;
  z-index: 10;
  border-bottom: 1px solid #d1d1d1;
}

/* Close button: remove default button box while keeping keyboard focus visible */
.close-btn {
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem 0.5rem; /* small visual cross, clickable area maintained */
  cursor: pointer;
}
.close-btn:focus { outline: none; }
.close-btn:focus-visible {
  /* keep an accessible focus ring without the default boxed look */
  /* Use the site's subdued dark focus treatment to match other pages */
  box-shadow: 0 0 0 3px rgba(0,0,0,0.18);
  border-radius: 6px;
}

/* Content fills remaining space */
.viewer-content {
  flex: 1;
  /* Stack content vertically and center it so the image+caption block is
     centered between the header and the bottom of the viewport. This makes
     the gap above the image (below the header) equal to the gap below the
     caption (above the bottom of the screen). */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  position: relative;
  padding: 0.125rem 0.5rem;
  min-height: 0;
  /* Allow the image container to expand when images are upscaled */
  overflow: visible;
}

/* Provide a vertical stacking wrapper inside the viewer content so the
   caption can sit beneath the image with a small gap. The markup uses a
   `.viewer-main` wrapper inside `.viewer-content`. */
.viewer-content .viewer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.44rem; /* increased 20% from 1.2rem */
}

/* Container uses calc() to account for header height */
.viewer-image-container { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  /* Let the container size to its contents (the image) so we can permit
     upscaling. Constrain by viewport so very large images still fit. */
  /* increased 20%: 82vw * 1.2 = 98.4vw, and rem/px scaled similarly */
  max-width: calc(98.4vw - 0.96rem);
  max-height: calc(98.4vh - 74.4px);
  width: auto;
  height: auto;
}

/* Image scales within container */
#viewer-image { 
  /* Allow the image to render at its intrinsic size (or be upscaled via transform).
     Use auto sizing so the container can grow to fit the image. Constrain by
     viewport max dimensions so images remain inside the viewer. */
  width: auto;
  height: auto;
  /* increased 20% from previous viewport constraints */
  max-width: calc(98.4vw - 0.96rem);
  max-height: calc(98.4vh - 74.4px);
  object-fit: contain;
  display: block;
  /* Images are sized by JS to 150% of intrinsic width (bounded by viewport). */
}

/* Mobile: account for mobile nav bar at bottom */
@media (max-width: 639px) {
  .viewer-content {
    padding: 0.125rem 0.5rem;
  }
  
  .viewer-image-container {
    /* Account for header (~50px) + mobile nav (~60px) + padding */
    /* increased 20% to match desktop constraints */
    max-height: calc(98.4vh - 127.2px);
  }
}


.viewer-caption {
  text-align: center;
  color: #1a2535;
  max-width: 800px;
  margin: 0.4608rem auto 0.5rem; /* 20% increase from 0.384rem */
  /* scale padding by 20% as well */
  padding: 0.3rem 0.9rem;
}

#caption-text { font-size: 1rem; line-height: 1.6; }

/* -----------------------------
   4) VIEWER NAVIGATION - DESKTOP
   ----------------------------- */
.viewer-nav-left, .viewer-nav-right {
  position: absolute;
  /* reduce the vertical hit area: keep navigation focused in the
     middle of the viewport instead of spanning the full height */
  top: 20vh;
  bottom: 20vh;
  width: 25%; /* horizontal hit area unchanged by default */
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: none; /* keep hover shading removed */
  z-index: 5;
  /* center arrow inside the reduced vertical band */
  justify-content: center;
}

.viewer-nav-left { left: 0; padding-left: 2rem; }
.viewer-nav-right { right: 0; padding-right: 2rem; }

/* prevent the large side areas changing shade on hover */
.viewer-nav-left:hover, .viewer-nav-right:hover { background: transparent; }

/* arrows are inline SVGs; color via currentColor */
.nav-arrow { color: #1a2535; opacity: 0.95; pointer-events: none; display: inline-flex; align-items:center; }
.nav-arrow svg { width: 28px; height: 28px; display: block; }
.nav-arrow svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.viewer-nav-left:hover .nav-arrow, .viewer-nav-right:hover .nav-arrow { opacity: 1; }

.viewer-nav-mobile { display: none; }

/* -----------------------------
   5) VIEWER NAVIGATION - MOBILE
   ----------------------------- */
/* Mobile-specific overrides are applied within media queries below */

/* Reserve bottom space for mobile nav when viewer content present */
.photo-viewer .viewer-content { padding-bottom: 0; }

/* -----------------------------
   6) RESPONSIVE BREAKPOINTS
   Mobile-first, then expand upwards
   ----------------------------- */
@media (min-width: 640px) {
  /* Tablet and up */
  .photo-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .viewer-nav-mobile { display: none; }
}

/* Ensure the mobile bottom nav is hidden on desktop widths where the
   SVG left/right navigation is shown. Use !important to override any
   duplicate/inline rules that might otherwise show it. */
@media (min-width: 640px) {
  .viewer-nav-mobile { display: none !important; }
}

@media (min-width: 980px) {
  /* Desktop */
  .photo-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* Keep header padding matching body on desktop as well */
  .collections-table thead th { padding: 0.9rem 0.75rem; }
  .collections-table thead th.count-col { text-align: center; }
  .collections-table thead th.preview-col { text-align: right; }
}

@media (max-width: 639px) {
  /* Mobile specific
     - Hide count column (expected to be implemented via utility classes in markup)
     - Show 2 thumbnails instead of 3 in preview
  */
  .collections-table td.hidden { display: none !important; }
  
  /* Disable horizontal scroll wrapper on mobile */
  .overflow-x-auto {
    overflow-x: visible !important;
    overflow: visible !important;
  }
  
  /* Override colgroup width styles */
  .collections-table colgroup,
  .collections-table col {
    width: auto !important;
  }
  
  /* Reduce table padding on mobile - override ALL padding including Tailwind */
  .collections-table td,
  .collections-table thead th,
  .collections-table td[class*="px-"],
  .collections-table thead th[class*="px-"],
  .collections-table td[class*="py-"],
  .collections-table thead th[class*="py-"] {
    padding: 0.5rem 0.25rem !important;
  }
  
  .collections-table thead th:first-child,
  .collections-table tbody td:first-child {
    padding-left: 0.25rem !important;
  }
  
  .collections-table thead th:last-child,
  .collections-table tbody td:last-child {
    padding-right: 0.25rem !important;
  }
  
  /* Show 2 preview thumbnails on mobile - override hidden class */
  .preview-thumbnails .thumb-4-3:nth-child(2) {
    display: inline-block !important;
  }
  
  .preview-thumbnails .thumb-4-3:nth-child(3) {
    display: none !important;
  }
  
  /* Make photo grid 2 columns on mobile */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .viewer-nav-left, .viewer-nav-right { display: none; }
  /* Mobile sticky bottom navigation: minimal Prev/Next text buttons */
  .viewer-nav-mobile {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(245, 241, 235, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    /* Transparent background for a lighter mobile look */
    background: transparent;
    border-top: 1px solid rgba(0,0,0,0.12);
  }

  /* Reduce thumbnail height on mobile to keep rows compact */
  .thumb-4-3 { height: 64px; }

  .viewer-nav-mobile a,
  .viewer-nav-mobile button {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0; /* similar to py-6 */
    font-family: 'IBM Plex Mono', monospace;
    /* normal weight per request */
    font-weight: 400;
    /* Black text on transparent background */
    color: #000;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
  }
  /* left button shows a right border to separate halves */
  .viewer-nav-mobile a:first-child,
  .viewer-nav-mobile button:first-child { border-right: 1px solid rgba(0,0,0,0.08); }
  .viewer-nav-mobile a:hover,
  .viewer-nav-mobile button:hover { background: var(--photos-hover, rgba(0,0,0,0.04)); }
  .viewer-nav-mobile .text-lg { font-size: 1.125rem; font-weight:400; }
  /* hide SVG arrows on mobile bottom nav - only show text */
  .viewer-nav-mobile svg { display: none !important; }
  #prev-btn-mobile, #next-btn-mobile { 
    flex: 1; 
    padding: 1rem; 
    background: transparent; 
    border: none; 
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer; 
    transition: all 0.2s;
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  /* Subtle divider between the two halves */
  #prev-btn-mobile { 
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
    padding-left: 1.5rem;
  }
  #next-btn-mobile {
    text-align: right;
    padding-right: 1.5rem;
  }
  /* Active/tap state */
  #prev-btn-mobile:active, #next-btn-mobile:active { 
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.9);
  }
  .viewer-content { padding-bottom: 4rem; }
}

/* -----------------------------
   7) UTILITY STYLES
   Accessibility, reduced motion, focus states
   ----------------------------- */
/* Use the shared site-wide focus-visible defined in `custom.css`. Remove
  the local dashed rule to avoid conflicting visuals. */


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Small helper to visually hide elements but keep for screen readers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.viewer-caption { color: #1a2535; }
.viewer-nav-desktop { position: absolute; inset: 0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.viewer-left, .viewer-right { width:25%; height:100%; pointer-events:auto; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.8); font-size:2rem; }
.mobile-btn { flex:1; padding: 0.75rem 1rem; font-weight:600; }

@media (max-width: 639px) {
  .viewer-nav-desktop { display: none; }
  .viewer-nav-mobile { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001; }
}
@media (min-width: 640px) {
  .viewer-nav-desktop { display: flex; }
  .viewer-nav-mobile { display: none !important; }
}

/* Minimal responsive utility fallbacks for Tailwind-like classnames used in templates */
.hidden { display: none !important; }

@media (min-width: 640px) {
  /* sm:* utilities */
  .sm\:inline-block { display: inline-block !important; }
  .sm\:hidden { display: none !important; }
}

@media (min-width: 768px) {
  /* md:* utilities */
  .md\:table-cell { display: table-cell !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:hidden { display: none !important; }
}

/* Ensure first column body cells line up with the header: remove the
  stray large left padding applied late in the file which caused the
  body cell content to sit inset relative to the header. Use the same
  vertical padding as other body cells but keep left padding at 0 so
  content in the first column touches the table edge like the header. */
.collections-table td:first-child { padding: 0.9rem 0.75rem 0.9rem 0; }

/* -----------------------------
  Collection page header offset
  -----------------------------
  Prevent collection pages (e.g. /photos/banaras/) from having their
  title underlap the fixed site header. This targets only pages that
  include the collection header markup (`.collection-header`) so other
  site sections (Projects, Bookmarks, etc.) are unaffected.
*/
.collection-header {
  /* Roughly match the fixed header height; tuned conservatively. Adjust
    this value if your header height changes. */
  margin-top: 72px;
}

/* Month/year metadata styling and responsive placement
   - Mobile / narrow screens: stacked under the description for compact layout
   - Desktop (>=880px): header becomes a two-column row with the month right-aligned
     so it sits visually opposite the title/description.
*/
.collection-month {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted, #666666);
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.95rem;
}

@media (min-width: 880px) {
  .collection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  /* left column keeps title and description stacked and grows to fill space */
  .collection-header-left {
    display: block;
    flex: 1 1 auto;
    min-width: 0; /* allow proper shrinking on narrow containers */
  }

  /* place month to the right and vertically center it with header content */
  .collection-month {
    margin-top: 0.4rem;
    align-self: center;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: 1rem;
    text-align: right;
  }
}