/* ====== Base Elements ======
 General rules for basic HTML elements in any context */
body {
  margin: 0;
  box-sizing: border-box;
  padding-bottom: 100px;
}

img,
svg {
  width: 100%;
  object-fit: cover;
}
/* header styling */
.header {
  position: sticky;
  top: 0;
  background-color: black;
  color: white;
  z-index: 10;
  margin: 0;
}

.header-content_container{
  text-align: center;
}


/* ====== Site Layout ====== 
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
  max-width: var(--container);
  margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
  position: fixed;
  bottom: 0;
  text-align: center;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space);
  > *:first-child {
    grid-column: span 2;
  }
}

.article-section {
  padding: 36px 32px;
}

.article-section .title-container {
  text-align: center;
}

.articles_container {
  display: grid;
  grid-template-columns: repeat(2 ,minmax(0, 1fr));
  gap: 32px;
}

.first-article-container{
  grid-column: span 2;
  border: 1px solid lightgray;
  padding: 32px;
}

.first-article-img{
  width: 100%;
  height: 80%;
}

.first-article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-title {
  margin: 24px 0px;
}

.article-btn {
  background-color: #222;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.article-btn a {
  color: inherit;
  text-decoration: none;
  border: none;
  outline: none;
}

.article-btn a:focus {
  outline: none;
  border: none;
}

.article-btn:hover {
  background-color: #333;
  transform: translateY(-2px);
}

.article-container {
  border: 1px solid lightgray;
  padding: 32px;
}


/* footer */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  background-color: #111;
  color: #ddd;
  border-top: 1px solid #333;
}

/* Adjust inner layout */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-section h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #fff;
}

.footer-social {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer-social a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: #aaa;
}