/* =========================================================
   GLOBAL.CSS — mobile-first stylesheet
   Link this ONE file on every page:
   <link rel="stylesheet" href="global.css">
   (adjust the path if global.css isn't in the same folder)
   ========================================================= */

/* --- Reset / base --- */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%; /* stops mobile browsers auto-shrinking text */
}

body {
    margin: 0;
    padding: 1rem;
    font-family: Georgia, 'Times New Roman', serif; /* swap for whatever suits your site */
    font-size: 1rem;
    line-height: 1.5;
    color: #1a1a1a;
    background: #ffffff;
    max-width: 900px;      /* keeps text lines readable on wide/desktop screens */
    margin-left: auto;
    margin-right: auto;
}

/* --- Headings / nav links at top of each page --- */
h1, h2, h3 {
    line-height: 1.25;
    margin: 0.6em 0 0.4em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; font-weight: normal; }
h3 { font-size: 1rem; font-weight: normal; }

a {
    color: #1a1a1a;
    text-decoration: underline;
}

a:hover, a:focus {
    color: #555;
}

/* --- Media: images, video, audio, embeds --- 
   This is the main fix for your current site: nothing should
   ever be wider than its container, and nothing should have a
   hardcoded pixel width like the 690px image rule you had. */

img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block;
}

audio {
    width: 100%;
    display: block;
}

/* PDF embeds via <embed> or <iframe> often need an explicit height
   since "height:auto" doesn't apply well to embedded documents */
.pdf-embed {
    width: 100%;
    height: 70vh;       /* scales with the viewport rather than a fixed px height */
    border: 1px solid #ccc;
}

/* --- Responsive video wrapper (keeps 16:9 ratio at any width) --- */
.video-container {
    position: relative;
    width: 100%;         /* mobile-first: full width by default */
    overflow: hidden;
}

.video-container::after {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Image/content sections --- 
   Mobile-first: everything stacks in a single column by default. */
section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

/* --- Page date-stamp (see dates.js) --- */
.page-meta {
    font-size: 0.85rem;
    color: #666;
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;
}

/* =========================================================
   BREAKPOINTS — mobile styles above are the default/base.
   These media queries only ADD or ADJUST for bigger screens.
   ========================================================= */

/* Tablets and up */
@media (min-width: 700px) {
    section#photos {
        flex-direction: row;
        flex-wrap: wrap;
    }

    section#photos img {
        width: calc(50% - 0.5rem); /* two per row, minus the gap */
    }

    .video-container {
        width: 75%; /* your original desktop sizing, preserved */
    }
}

/* Larger desktop screens */
@media (min-width: 1100px) {
    section#photos img {
        width: calc(33.33% - 0.67rem); /* three per row */
    }
}

blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid #ccc;
    font-style: italic;
    color: #444;
}

.pull-quote {
    font-size: 1.3rem;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #333;
}