/**
 * Velonix Labs — Peptide Storage & Stability Guide (layout refinements)
 * Enqueued ONLY on this page (see inc/enqueue.php,
 * is_page_template('page-peptide-storage-guide.php')).
 *
 * Every rule here targets a class authored directly on the specific
 * element in page-peptide-storage-guide.php (.storage-guide-hero-content,
 * .storage-guide-intro, .storage-guide-conditions) — NOT a body class.
 * An earlier version of this file scoped everything under
 * body.page-template-page-peptide-storage-guide-php (WordPress's
 * documented body_class() convention for this template), which should
 * have worked, but the centring it was meant to apply was reported as
 * still not appearing after that fix. Rather than re-verify the same
 * assumption again, this removes the dependency on body_class() output
 * entirely — these classes are authored by hand, on the exact elements
 * that need them, in the same file this stylesheet is enqueued for, so
 * there is no string to get right or WordPress convention to rely on:
 * if the class is in the HTML, this CSS matches it, full stop.
 *
 * Nothing here touches .hero, .why-grid, .why-copy, or any other
 * shared component's own rules in components.css — About and every
 * other page using those components is unaffected, since none of them
 * have these new classes in their markup.
 */

/* ===== 1. Hero content centred — desktop & tablet ===== */
@media (min-width:768px){
  .storage-guide-hero-content{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ===== 2. Intro paragraph centred — desktop & tablet =====
   max-width is already set inline on this element (720px) — this only
   adds the centring margin the inline style didn't include. Text stays
   left-aligned within the centred block, matching the hero. */
@media (min-width:768px){
  .storage-guide-intro{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ===== 3. Storage Conditions — top-aligned columns, desktop+ =====
   Root cause: .why-grid has align-items:center (components.css) —
   fine when both columns are a similar height, but here .why-copy
   (three short lines) is much shorter than .why-list (six items), so
   centering vertically against the taller column pushes .why-copy's
   heading down well past where the list actually starts. Overridden
   to start so both columns begin at the same height. */
.storage-guide-conditions{
  align-items:start;
}

/* ===== 4. Storage Conditions — centred as a block on tablet =====
   At the shared ≤1023px breakpoint, .why-grid already collapses to a
   single stacked column (components.css) — kept exactly as is. What
   wasn't intentional: that stacked column ran the full tablet width,
   so .why-copy's own already-narrow paragraph (max-width:420px,
   components.css) sat hugging the left edge instead of reading as a
   deliberately composed block. Constraining and centring the whole
   stacked group (not each piece separately) is what makes this read
   as designed for tablet rather than a leftover desktop column. */
@media (min-width:768px) and (max-width:1023px){
  .storage-guide-conditions{
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ===== 5. Mobile — Storage Conditions heading centred, body copy left =====
   Unchanged from the previous pass — kept here for the same reason
   (Factors Affecting Stability and Laboratory Best Practices are
   already centred at every width via their own inline styles in
   page-peptide-storage-guide.php). Only the eyebrow and h2 are
   centred; the paragraph is left untouched on purpose. */
@media (max-width:767px){
  .storage-guide-conditions .why-copy .eyebrow{
    justify-content:center;
  }
  .storage-guide-conditions .why-copy h2{
    text-align:center;
  }
}