/*
 * The simple content pages: project_tips.php, volunteer_guide.php, success_stories.php.
 *
 * WHAT WAS THERE
 *
 * 206 inline lines across three pages. Eleven selectors each, and they were not three
 * designs. Seven — body, .content-container, .page-header and its h1 and p, .back-link
 * and its anchor — were byte-identical on all three. The .tip-card family, four more
 * rules, was byte-identical between project_tips.php and volunteer_guide.php, which are
 * the two "how to" pages and render five cards each.
 *
 * So: one chrome, one card, written three times and twice respectively.
 *
 * THE FOUR RULES THAT ARE NOT HERE
 *
 * success_stories.php carried .story-card, .story-card h2, .story-card blockquote and
 * .story-card .author. That page emits no .story-card. Its <main> is a heading, a
 * paragraph saying "We are collecting stories from the non-profits and volunteers using
 * TechAid Connect. This page will fill up as projects complete", a gap, and a back link.
 * The rules were written for markup that does not exist yet.
 *
 * They are deleted rather than carried forward, and the reason is not tidiness:
 * css/styles.css ALSO defined .story-card at the time, in three places, as a different
 * component
 * — an image card with .story-card-content, h3 and p. The page's version was a
 * blockquote card with an author line. Two designs under one name, one of them invisible,
 * and whoever finally writes that markup would have got whichever loaded last without
 * ever learning there was a choice. They are in git history with this message attached
 * if the blockquote design is the wanted one.
 *
 * CORRECTED 3 October 2026: "css/styles.css ALREADY defines" is past tense now. That
 * other .story-card moved to css/design-gallery.css on 25 September and was deleted on
 * 3 October, because the site had stopped shipping story cards on 28 August and only the
 * design gallery still rendered one. So NEITHER design exists in the tree today. The
 * collision this paragraph warns about is gone, and whoever writes that markup now
 * starts from a clean name - which makes the choice recorded above more useful, not
 * less: both designs are in history and neither will silently win.
 *
 * WHAT CHANGED
 *
 * Every literal became a token: #f4f7f6, #ffffff, #2c3e50, #555, #333. The card shadow
 * became --shadow-md. Nothing else moved.
 */

body {
    background-color: var(--surface-subtle);
}

.content-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 2rem;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-header h1 {
    font-size: 3rem;
    color: var(--text-color);
}

.page-header p {
    font-size: 1.25rem;
    color: var(--gray);
    max-width: 700px;
    margin: 1rem auto 0;
}

/* project_tips.php and volunteer_guide.php, five cards each. success_stories.php loads
   this file for the chrome above and renders none of these. */
/* 16px, not 12px: the corner ramp is 6 / 10 / 16 / 20 / pill and cards take the
   16-to-20 band. The shadow and surface were already right. */
.tip-card {
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.tip-card .tip-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-top: 5px;
}

.tip-card .tip-content h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.tip-card .tip-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--gray);
}

.back-link {
    text-align: center;
    margin-top: 3rem;
}

.back-link a {
    text-decoration: none;
    font-weight: 600;
    color: var(--brand-text);
}

/* THE PAGE EDGE IS 16px BELOW 480, per docs/style-guide.md's Small breakpoint.

   This lives HERE rather than in css/styles.css because includes/head.php emits
   extra_css AFTER styles.css, and a media query adds no specificity - so at equal
   specificity the page stylesheet wins and a rule in the global sheet for this
   selector is correct and completely inert. Measured: the global rule moved eight
   pages of fifteen and left this one at 32px.

   Horizontal only. The vertical padding is this component's own spacing decision
   and the guide's rule is about the page edge. */
@media (max-width: 480px) {
    .content-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}