/* ==========================================================================
   Seasons Find - editorial content styling
   Loaded last. Gives the long-form technical sections the typographic
   treatment they need: real numerals, custom markers, definition-style
   lead-ins, and a readable vertical rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rhythm and headings
   -------------------------------------------------------------------------- */
.prose{color:var(--ink-soft)}

.prose h2{
  position:relative;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  letter-spacing:-.03em;
  margin-top:clamp(2.75rem,5vw,4rem);
  margin-bottom:var(--sp-4);
  padding-top:var(--sp-5);
}
.prose h2::before{
  content:"";position:absolute;top:0;left:0;
  width:42px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
}
.prose h2:first-child{margin-top:0}

.prose h3{
  font-size:clamp(1.08rem,1rem + .4vw,1.25rem);
  letter-spacing:-.02em;
  margin-top:var(--sp-7);
  margin-bottom:.6rem;
  color:var(--navy-850);
}

.prose p{margin-bottom:1.15rem;line-height:1.72}
.prose p + h3{margin-top:var(--sp-6)}

/* opening paragraph of a section reads slightly larger */
.prose > p:first-of-type{
  font-size:clamp(1.04rem,1rem + .3vw,1.16rem);
  line-height:1.68;color:var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Ordered lists - real numerals, not browser defaults
   -------------------------------------------------------------------------- */
.prose ol{
  list-style:none;padding:0;margin:0 0 var(--sp-6);
  counter-reset:pstep;display:grid;gap:.85rem;
}
.prose ol > li{
  counter-increment:pstep;
  position:relative;margin:0;
  padding:1rem 1.15rem 1rem 3.4rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.97rem;line-height:1.65;
  transition:border-color .25s ease,transform .25s var(--ease),box-shadow .25s ease;
}
.prose ol > li:hover{
  border-color:rgba(217,168,64,.5);
  transform:translateX(3px);
  box-shadow:var(--shadow-xs);
}
.prose ol > li::before{
  content:counter(pstep);
  position:absolute;left:1rem;top:.95rem;
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-850));
  color:var(--gold-400);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  letter-spacing:-.02em;
}
/* bold lead-in inside a numbered step */
.prose ol > li > strong:first-child{
  display:block;color:var(--navy-900);
  font-family:var(--font-display);font-weight:750;
  font-size:1rem;letter-spacing:-.015em;margin-bottom:.25rem;
}

/* --------------------------------------------------------------------------
   Unordered lists - custom marker, definition-style lead-ins
   -------------------------------------------------------------------------- */
.prose ul{
  list-style:none;padding:0;margin:0 0 var(--sp-6);
  display:grid;gap:.7rem;
}
.prose ul > li{
  position:relative;margin:0;padding-left:1.85rem;
  font-size:.97rem;line-height:1.68;
}
.prose ul > li::before{
  content:"";position:absolute;left:.25rem;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--gold-500);
  transform:rotate(45deg);
}
.prose ul > li > strong:first-child{
  color:var(--navy-900);font-weight:700;
}

/* a list immediately after a heading sits closer */
.prose h2 + ul,.prose h2 + ol,
.prose h3 + ul,.prose h3 + ol{margin-top:var(--sp-2)}

/* --------------------------------------------------------------------------
   Callout - lift it well clear of body copy
   -------------------------------------------------------------------------- */
.prose .callout,.callout{
  position:relative;
  background:linear-gradient(135deg,#FFFBF2,#FFF7E6);
  border:1px solid rgba(217,168,64,.34);
  border-left:4px solid var(--gold-500);
  border-radius:var(--radius-sm);
  padding:1.25rem 1.5rem 1.25rem 3.4rem;
  margin-block:var(--sp-6);
  box-shadow:0 1px 2px rgba(181,137,43,.08);
}
.prose .callout::before,.callout::before{
  content:"!";
  position:absolute;left:1.25rem;top:1.3rem;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold-500);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
}
.callout p{margin-bottom:.5rem;font-size:.95rem;line-height:1.65;color:#5A4A22}
.callout p:last-child{margin-bottom:0}
.callout strong{color:#3D3214}

/* --------------------------------------------------------------------------
   Tables - clearer hierarchy inside long articles
   -------------------------------------------------------------------------- */
.prose .table-wrap{
  margin-block:var(--sp-6);
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(11,17,40,.05);
}
.prose table{font-size:.92rem}
.prose th{
  background:var(--navy-850);color:#fff;
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.9rem 1.1rem;
}
.prose td{padding:.95rem 1.1rem;vertical-align:top;line-height:1.55}
.prose tbody tr:nth-child(even){background:#FAFBFD}
.prose tbody tr:hover{background:var(--surface-2)}
.prose td:first-child{font-weight:650;color:var(--navy-850)}

/* --------------------------------------------------------------------------
   Closing link paragraph
   -------------------------------------------------------------------------- */
.prose > p:last-child{
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
  font-size:.95rem;color:var(--muted);
}
.prose > p:last-child a{font-weight:650}

/* --------------------------------------------------------------------------
   Dark-section variant (area pages use section--surface, but guard anyway)
   -------------------------------------------------------------------------- */
.section--navy .prose ol > li{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);color:#B6C0DC;
}
.section--navy .prose ol > li > strong:first-child{color:#fff}
.section--navy .prose ul > li{color:#B6C0DC}
.section--navy .prose ul > li > strong:first-child{color:#fff}
.section--navy .prose h3{color:#fff}
.section--navy .prose > p:last-child{border-top-color:rgba(255,255,255,.12);color:#9BA7C7}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  .prose h2{margin-top:2.25rem;padding-top:1.1rem}
  .prose h2::before{width:34px;height:3px}
  .prose ol > li{padding:.9rem 1rem .9rem 3rem;font-size:.94rem}
  .prose ol > li::before{left:.8rem;top:.85rem;width:25px;height:25px;font-size:.76rem}
  .prose ul > li{padding-left:1.6rem;font-size:.94rem}
  .prose .callout,.callout{padding:1.1rem 1.1rem 1.1rem 3rem}
  .prose .callout::before,.callout::before{left:1rem;top:1.15rem}
  .prose th,.prose td{padding:.75rem .85rem}
}

@media(prefers-reduced-motion:reduce){
  .prose ol > li{transition:none}
  .prose ol > li:hover{transform:none}
}