/* ========== Ida Mae’d - style.css (fresh layout) ========== */

/* Basic reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: cover;
}

/* Page background + default text */
body {
  font-family: Arial, sans-serif;
  line-height: 1.5;

  /* Rose-gold background */
  background: #b76e79;

  /* Default text color (adjust if you want lighter/darker) */
  color: #1f1a1a;
}

/* A centered page wrapper so content has comfy side padding */
.wrapper {
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* ========== 1) Logo Box (Hero) ========== */
/* This is the container that holds your logo image */
.logo-hero {
  width: 100%;
  height: 90vh;
  overflow: hidden;          /* you asked for overflow hidden */
  background: #ffffff;       /* prevents rose-gold from showing through */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The logo image should fill the hero without stretching */
.logo-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fills the box; crops edges if needed */
}

/* ========== 2) About Section (Title + paragraphs) ========== */
.about-section {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 28px;
  margin: 22px auto 32px;    /* important bottom margin so next section won't overlap */
  overflow: auto;            /* prevents collapse / cut-off issues */
}

/* Title space */
.about-section h1,
.about-section h2 {
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* Paragraph spacing */
.about-section p {
  margin-top: 12px;
}

/* ========== 3) Gallery Grid (8 items) ========== */
.gallery-grid {
  display: grid;

  /* 4 across on wide screens */
  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
  margin-bottom: 50px;
}

/* Each gallery card */
.gallery-item {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  overflow: hidden;
  padding: 14px;
}

/* Clickable image area */
.gallery-item a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}

/* Placeholder / actual image */
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;       /* keeps all boxes same shape */
  object-fit: cover;
}

/* Collection name under image */
.gallery-item h3 {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

/* Short paragraph under name */
.gallery-item p {
  font-size: 0.95rem;
  opacity: 0.95;
}

/* ========== Responsiveness (works on any device) ========== */
/* Tablets */
@media (max-width: 1000px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 across */
  }

  .logo-hero {
    height: 60vh; /* keeps it large but not overwhelming on tablets */
  }
}

/* Phones */
@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* 1 across */
  }

  .about-section {
    padding: 18px;
  }

  .logo-hero {
    height: 50vh;
  }
}