/* ==========================================================================
   guides.css – Styles for guide pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Color & Spacing Variables
   -------------------------------------------------------------------------- */
:root {
  --gold:       #ffd069;
  --bronze:     #d79b4b;
  --text-light: #e0d6c3;
  --bg-dark:    rgba(30,20,10,0.6);
  --gap:        1.5rem;
  --radius:     6px;
}

/* --------------------------------------------------------------------------
   Guide Container
   -------------------------------------------------------------------------- */
.guide {
  font-family: 'Trajan Pro', serif;
  color: var(--text-light);
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 var(--gap);
}

/* Main Title */
.guide > h1 {
  text-align: center;
  font-size: 3.5rem;
  color: var(--gold);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  margin-bottom: var(--gap);
}

/* --------------------------------------------------------------------------
   Generic Guide Section (2-column grid)
   -------------------------------------------------------------------------- */
.guide-section {
  display: grid;
  grid-template-areas:
    "heading heading"
    "image   text";
  grid-template-columns: 1fr 2fr;
  gap: var(--gap);
  background: var(--bg-dark);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-bottom: var(--gap);
}

/* Section Heading */
.guide-section > h2 {
  grid-area: heading;
  font-size: 2.25rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 var(--gap) 0;
  border-bottom: 2px solid var(--bronze);
  padding-bottom: 0.25em;
}

/* Image Column */
.guide-section .image-col {
  grid-area: image;
  text-align: center;
}
.guide-section .image-col img {
  width: 100%;
  height: auto;
  /* remove any previous max-width */
  max-width: none;
  border: 2px solid var(--bronze);
  border-radius: 4px;
}

/* Text Column */
.guide-section .text {
  grid-area: text;
  font-size: 1.2rem;
  line-height: 1.6;
}
.guide-section .text p {
  margin-bottom: var(--gap);
}
.guide-section .text ul {
  padding-left: 1.25em;
  list-style: disc;
}
.guide-section .text ul li {
  margin-bottom: 0.75em;
}

/* --------------------------------------------------------------------------
   Responsive: Stack on narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .guide-section {
    grid-template-areas:
      "heading"
      "image"
      "text";
    grid-template-columns: 1fr;
    text-align: center;
  }
  .guide-section .image-col img {
    max-width: 80%;
    margin: 0 auto var(--gap);
  }
  .guide-section .text {
    font-size: 1rem;
  }
}