/* style.css
  FLEXBOX ACTIVITY: Image + Text Cards
  BREAKPOINTS:
  - Desktop: default styles (above 960px)
  - Tablet: 960px and below
  - Mobile: 428px and below

  STUDENT TO-DO:
  1) Change background color + font if you want (keep readable).
  2) Try changing justify-content values:
     - center, space-between, space-around, space-evenly
  3) Try changing image height (160–220px).
*/

/* 1) BASIC RESET */
*{
  box-sizing: border-box;
}

/* 2) BODY STYLES */
body{
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  color: #222;
}

/* 3) HEADER STYLES */
.site-header{
  text-align: center;
  padding: 24px 16px;
}
.site-header h1{
  margin: 0 0 8px;
}
.site-header p{
  margin: 0;
}

/* 4) FLEX CONTAINER (IMPORTANT PART) */
.container{
  /* Make the layout centered and not too wide */
  width: min(961px, 92%);
  margin: 0 auto 40px;

  /* FLEXBOX */
  display: flex;           /* turns this into a flex container */
  flex-wrap: wrap;         /* allows cards to go to the next line */
  gap: 16px;               /* space between cards */
  justify-content: center; /* horizontal alignment of cards */
  align-items: stretch;    /* makes cards equal height */
}

/* 5) CARD STYLES */
.card{
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);

  /* DESKTOP DEFAULT:
     - flex: grow shrink baseWidth
     - baseWidth 300px helps create ~3 columns on wide screens
  */
flex: 0 0 calc(33.33% - 20px);

  /* Prevent cards from stretching too wide */
  max-width: 340px;
}

/* 6) IMAGE STYLES */
.card-img{
  width: 100%;
  height: 180px;     /* You may adjust this */
  object-fit: cover; /* crop image nicely without distortion */
  display: block;
}

/* 7) TEXT AREA */
.card-body{
  padding: 14px 14px 18px;
}
.card-title{
  margin: 0 0 8px;
  font-size: 18px;
}
.card-text{
  margin: 0 0 12px;
  line-height: 1.5;
  font-size: 14px;
}

/* 8) BUTTON/LINK */
.card-btn{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  background: #111;
  color: #fff;
  font-size: 14px;
}

/* =========================
   TABLET (960px and below)
   TARGET: 2 cards per row
   ========================= */
@media (max-width: 960px) {
.card {
	flex: 0 0 calc(50% - 20px); 
	}
}

/* =========================
   MOBILE (428px and below)
   TARGET: 1 card per row
   ========================= */
@media (max-width: 428px) {
  .container{
    gap: 12px; /* slightly smaller spacing */
  }

  .card{
    flex: 1 1 100%;
    max-width: 100%;
  }

  .card-img{
    height: 160px; /* smaller image for mobile */
  }
}