/* ==============================
   1️⃣  Shared CSS Variables
   ============================== */
:root {
  /* Colours – pick a soft palette for readability */
  --bg-page: #f4f4f4;
  --bg-article: #ffffff;
  --text-primary: #222222;
  --text-secondary: #555555;
  --accent: #1a73e8;          /* blue accent (like Android Material) */
  --shadow: 0 2px 8px rgba(0,0,0,.12);
  --border-radius: 6px;
  --transition: .3s ease;
  --max-width: 800px;
  --gap-sm: .75rem;
  --gap-lg: 1.5rem;
}

/* ==============================
   2️⃣  Global Reset & Basic Layout
   ============================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  padding: 2rem 1rem;
  display:flex;
  justify-content:center;
}

/* ==============================
   3️⃣  Article Card Styling
   ============================== */
article {
  background: var(--bg-article);
  max-width: var(--max-width);
  width:100%;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: var(--gap-lg);
  display:flex;
  flex-direction:column;
  gap: var(--gap-sm);
  transition: transform var(--transition);
}
article:hover { transform: translateY(-4px); }

/* ==============================
   3.1 Header Section
   ============================== */
article header {
  margin-bottom: var(--gap-sm);
}
article header h1 {
  margin:0;
  font-size: 1.8rem;
  color: var(--accent);
  line-height: 1.2;
}
article header .date {
  margin-top:.3rem;
  font-size:.9rem;
  color: var(--text-secondary);
}

/* ==============================
   4️⃣  Content Section
   ============================== */
article section p {
  margin:0 0 var(--gap-sm) 0;
  color: var(--text-primary);
}
article section iframe {
  width:100%;
  max-width:100%;
  height:400px;
  border:0;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: var(--gap-sm) 0;
}

/* ======================================
   4.1  Make <iframe> responsive on small screens
   ====================================== */
@media (max-width: 580px) {
  article section iframe {
    height: auto;
    padding-bottom: 56.25%;   /* 16:9 ratio */
    position: relative;
  }
  article section iframe::after {
    content: "";
    display:block;
    padding-top: 56.25%;   /* 16:9 ratio */
  }
}

/* ==============================
   5️⃣  Footer – Attribution
   ============================== */
article footer {
  margin-top: var(--gap-xs);
  color: var(--text-secondary);
  font-size:.85rem;
  text-align:right;
}

/* ==============================
   6️⃣  Optional: Link Styling (if any)
   ============================== */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ==============================
   7️⃣  Mobile Typography Adjustments
   ============================== */
@media (max-width: 430px) {
  article header h1 {
    font-size: 1.5rem;
  }
}