/* ------------------------------------------------------------------
 * mobile.css -- fluid phone layout (sharpen, don't replace).
 *
 * The HalfTone theme rides on the old Less Framework fixed grid: below
 * 480px viewport width it locks the whole page into a 252px column
 * (#posts-list 212px), so modern phones get a cramped strip with the
 * teal backdrop showing on both sides. The #band section was already
 * modernized with fluid @media rules in style.css; this file does the
 * same for the wrapper + events list so the cards use the full width.
 *
 * Horizontal-only: the date-circle's vertical rhythm is untouched, it is
 * just re-centered over the now-wider card.
 *
 * Loaded last so it overrides the theme. Non-destructive: remove the
 * <link> in index.html to revert completely.
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 767px) {
  /* Let the page fill the phone instead of a fixed 252px centered column,
     but keep a small gutter so the cream block doesn't touch the edges */
  .wrapper {
    width: calc(100% - 32px); /* 16px of air on each side */
    max-width: 600px;
    margin-inline: auto;
  }

  /* Events list fills the wrapper (was a fixed 212px float) */
  #posts-list {
    width: auto;
    float: none;
    margin-left: 0;
    padding-inline: 20px;
  }
  #posts-list article .entry-left-data {
    width: auto;
    height: auto;
    float: none;
  }
  #posts-list article .entry-right-data {
    width: auto;
    margin-left: 0;
    float: none;
    /* breathing room between the card text and the card background;
       width:auto absorbs the padding so no overflow despite content-box */
    padding-inline: 16px;
  }

  /* Re-center the date circle over the full-width card
     (theme hard-codes left:76px = centered only in the old 212px column) */
  #posts-list article .entry-date {
    left: 50%;
    margin-left: -30px; /* half of the 60px circle */
  }
}