/* Basic reset & layout */
*{box-sizing: border-box}


.headlines{
  --bg: #ffffff;
  --card-bg: #ffffff;
  --accent: #0f62fe;
  --muted: #6b7280;
  --radius: 14px;
  /*--shadow: 0 6px 18px rgba(16,24,40,0.08);*/
  --shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

  --max-card-width: 720px;
  /* fluid font sizes using clamp(min, preferred, max) */
  --fs-base: clamp(15px, 1.6vw, 18px);
  --fs-title: clamp(1.05rem, 3.2vw, 1.45rem);
  --fs-body: clamp(0.95rem, 2.4vw, 1.05rem);
  --fs-date: clamp(0.75rem, 1.8vw, 0.85rem);

  width: 100%;
  margin:0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: var(--fs-base);
  background: linear-gradient(180deg,var(--bg),#ffffff);
  color: #0b1220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: dotted 0px orange;
}





/* Container to show one or more cards */
.cards {
  width:100%;
  max-width: var(--max-card-width);
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
  /*border: solid 1px lightblue;*/

  /*margin:0;*/
  /*font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
  /*font-size: var(--fs-base);*/
  /*background: linear-gradient(180deg,var(--bg),#ffffff);*/
  /*color: #0b1220;*/
  /*display:flex;*/
  /*align-items:center;*/
  /*justify-content:center;*/
  /*padding:24px;*/
  /*-webkit-font-smoothing:antialiased;*/
  /*-moz-osx-font-smoothing:grayscale;*/
  /*border: dotted 1px orange;*/
    }

/* On wider screens show two cards side-by-side */
@media (min-width: 860px){
  .cards{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
  }
}

/* Card */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform 180ms ease, box-shadow 180ms ease;
  min-height: 130px;
  width:100%;
  overflow:hidden;
}

.card:focus,
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16,24,40,0.12);
}

/* Title */
.card__title{
  margin:0;
  font-size: var(--fs-title);
  line-height:1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #071133;
}

/* Body text */
.card__text{
  margin:0;
  font-size: var(--fs-body);
  line-height:1.5;
  color: #111827;
  opacity: 0.92;
}

/* Date (small) */
.card__meta{
  margin-top: auto; /* push date to bottom when card grows */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-date);
  color: var(--muted);
}

/* date pill (optional) */
.card__date {
  background: rgba(15,98,254,0.06);
  color: var(--accent);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight:600;
  font-size: calc(var(--fs-date) - 0.02rem);
  display: inline-block;
}

/* Accessibility: focus outline for keyboard users */
.card:focus{
  outline: 3px solid rgba(15,98,254,0.18);
  outline-offset: 4px;
}

/* Utility for small screens: reduce padding a little */
@media (max-width:360px){
  .card{ padding:12px; border-radius:12px }
}


.cards {
  display: grid;
  grid-template-columns: 1fr;   /* 1 column on small screens */
  gap: 18px;
}

/* columns on tablets */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* columns on laptops/desktops */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* columns on extra-wide screens */
@media (min-width: 1440px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
  }
}