/* --- NEW STEP-BY-STEP LAYOUT SYSTEM --- */

/* --- EXACT WIREFRAME-BASED LAYOUT --- */

/* Main Layout Container (White Background) */
.layout-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 0px;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); */
  margin-bottom: 3rem;
  display: grid;

  /* Columns:
     — cols 1–5: flexible tracks (min 30px, share leftover)
     — col 6: fixed 20px gutter
     — cols 7–9: flexible tracks (min 30px, share leftover) */
  grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr)
    minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr)
    minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr)
    minmax(30px, 1fr);

  /* Rows:
     — rows 1–15: flexible (min 30px, share leftover)
     — row 16: fixed 10px gutter
     — rows 17–22: flexible (min 30px, share leftover) */
  grid-template-rows: repeat(15, minmax(30px, 1fr)) 10px
    repeat(6, minmax(30px, 1fr));

  gap: 18px; /* uniform gap between *all* tracks */
  min-width: 620px;
}

/* Picture 1 Box - cols 1–5, rows 1–15 */
.picture-1-box {
  grid-column: 1 / 8;
  grid-row: 1 / 14;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.picture-1-box img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text Box - cols 7–9, rows 2–7 */
.text-box {
  grid-column: 8 / 14;
  grid-row: 2 / 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
}
.text-box .title {
  font-size: 2.2em;
  color: var(--primary-color);
  margin-bottom: 20px;
  /* text-shadow: 1px 1px 3px rgba(97, 68, 15, 0.911); */
  line-height: 1.2;
}
.text-box p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--medium-dark-text-on-light);
}

/* Picture 3 Box - cols 7–9, rows 11–18 */
.picture-3-box {
  grid-column: 8 / 14;
  grid-row: 11 / 19;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.picture-3-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Picture 2 Box - cols 5–6, rows 16–22 */
.picture-2-box {
  grid-column: 3 / 8;
  grid-row: 14 / 23;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.picture-2-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}



/* ========================================================== */
/* ========================================================== */
/** NEW MEDIA QUERY FOR LARGE LAPTOPS / SMALLER DESKTOPS */
/* ========================================================== */

/* Main Layout Container (White Background) */
@media (max-width: 1707px) {
  /* --- Styles for screens 1707px and narrower --- */

.layout-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 0px;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); */
  margin-bottom: 3rem;
  display: grid;

  /* Columns:
     — cols 1–5: flexible tracks (min 30px, share leftover)
     — col 6: fixed 20px gutter
     — cols 7–9: flexible tracks (min 30px, share leftover) */
  grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr)
    minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr)
    minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr)
    minmax(30px, 1fr);

  /* Rows:
     — rows 1–15: flexible (min 30px, share leftover)
     — row 16: fixed 10px gutter
     — rows 17–22: flexible (min 30px, share leftover) */
  grid-template-rows: repeat(15, minmax(30px, 1fr)) 10px
    repeat(6, minmax(30px, 1fr));

  gap: 18px; /* uniform gap between *all* tracks */
  min-width: 620px;
}

/* Picture 1 Box - cols 1–5, rows 1–15 */
.picture-1-box {
  grid-column: 1 / 16;
  grid-row: 1 / 14;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.picture-1-box img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text Box - cols 7–9, rows 2–7 */
.text-box {
  grid-column: 16 / 22;
  grid-row: 2 / 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
}
.text-box .title {
  font-size: 2.2em;
  color: var(--primary-color);
  margin-bottom: 20px;
  /* text-shadow: 1px 1px 3px rgba(97, 68, 15, 0.911); */
  line-height: 1.2;
}
.text-box p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--medium-dark-text-on-light);
}

/* Picture 3 Box - cols 7–9, rows 11–18 */
.picture-3-box {
  grid-column: 8 / 14;
  grid-row: 11 / 19;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.picture-3-box img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Picture 2 Box - cols 5–6, rows 16–22 */
.picture-2-box {
  grid-column: 3 / 8;
  grid-row: 14 / 23;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.picture-2-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

}