/* ===================================================================
   CUSTOM STYLES - KIRBY PORTFOLIO (Gallery-free version)
   ================================================================ */

/* ===== CSS VARIABLES & ROOT ===== */
:root {
  --content-padding: 100px;
  --content-padding-tablet: 50px;
  --content-padding-mobile: 25px;
  --text-color: #222;
  --border-color: rgba(34, 34, 34, 0.1);
  --muted-text: rgba(34, 34, 34, 0.7);
  --audio-bg: #f8f8f8;

  /* Fluid Typography - scales smoothly between mobile and desktop */
  --font-size-fluid-large: clamp(18px, 1.25vw + 14px, 24px);
  --font-size-fluid-medium: clamp(16px, 1.1vw + 13px, 20px);
  --font-size-fluid-small: clamp(14px, 1vw + 12px, 18px);
  --font-size-fluid-tiny: clamp(10px, 0.8vw + 9px, 12px);
}

/* ===== GLOBAL STYLES ===== */

/* Reset and base typography */
* {
  font-weight: 500;
}

strong, b {
  font-weight: 700;
}

/* Link styles - SPECIFIC selectors to avoid conflicts */
a {
  color: var(--text-color);
  text-decoration: underline;
  transition: opacity 0.2s ease-in-out;
}

/* Text links ONLY - very specific to avoid gallery conflicts */
.prose p a:hover,
.prose li a:hover,
.content p a:hover,
.content li a:hover,
article p a:hover,
article li a:hover {
  opacity: 0.7;
}

/* Remove underlines from navigation and layout links */
nav a,
header a,
.grid a,
a.no-underline {
  text-decoration: none;
}

/* Prose overrides */
.prose a {
  color: var(--text-color) !important;
  text-decoration: underline;
  transition: opacity 0.2s ease-in-out;
}

.prose p a:hover,
.prose li a:hover {
  opacity: 0.7 !important;
  color: var(--text-color) !important;
}

/* Do NOT give <br> a display/margin here. Blink ignores `display: block` on a
   line break and keeps its native behaviour, Gecko honours it and adds the
   margin above AND below every break, so the same content rendered as one
   airy paragraph in Firefox and a tight one in Chrome. A <br> is left to the
   user agent so both engines break the line identically. To space lines apart,
   use line-height or separate paragraphs. */

.prose p {
  margin-bottom: 1em;
}

/* (No <br> rule here either, see the note above .prose p) */

.project-description p {
  margin-bottom: 1em;
}

/* More specific targeting for project description paragraphs */
.project-description.prose p {
  margin-bottom: 1.5em;
  display: block;
}

/* Project description typography (without prose class) */
.project-description {
  line-height: 1.7;
}

.project-description p {
  margin-bottom: 1.25em;
}

.project-description strong,
.project-description b {
  font-weight: 700;
}

.project-description h1,
.project-description h2,
.project-description h3,
.project-description h4,
.project-description h5,
.project-description h6 {
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

.project-description ul,
.project-description ol {
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.project-description ul {
  list-style-type: disc;
}

.project-description ol {
  list-style-type: decimal;
}

.project-description blockquote {
  border-left: 4px solid var(--text-color, #222);
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
}

/* ===== LAYOUT SYSTEM ===== */

.main-container {
  width: 100%;
  max-width: 100%;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
  margin-left: auto;
  margin-right: auto;
}

.content-module-container {
  width: 100%;
  min-width: 300px;
  max-width: 1250px;
}

/* ===== PROJECT GRID STYLES ===== */

.project-title {
  padding: 0;
  font-size: 1.125rem;
}

.project-year {
  font-weight: normal;
  color: var(--text-color);
}

.project-category {
  font-size: 0.75rem;
  background-color: transparent;
  border: 1px solid var(--text-color);
  border-radius: 0;
  padding: 2px 8px;
}

.project-grid-item h3 {
  color: var(--text-color) !important;
  font-weight: normal !important;
}

/* Note: Audio, Video, Slider, and other content module styles are now handled by the standalone content-modules plugin */

/* ===== LIGHTBOX STYLES ===== */

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-content img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  :root {
    --content-padding: var(--content-padding-tablet);
  }

  .main-container,
  header .main-container,
  footer .main-container {
    padding-left: var(--content-padding-tablet);
    padding-right: var(--content-padding-tablet);
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  :root {
    --content-padding: var(--content-padding-mobile);
  }

  .main-container,
  header .main-container,
  footer .main-container {
    padding-left: var(--content-padding-mobile);
    padding-right: var(--content-padding-mobile);
  }

  /* Footer mobile stacking */
  footer .main-container > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  footer .main-container > div > div {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Audio responsive styles now handled by content-modules plugin */