/* ─────────────────────────────
   📦 Main Content Block
───────────────────────────── */
.main-content-block {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1.5rem;
  padding-top: 0rem;
}

/* ─────────────────────────────
   📋 Header and Page Introduction
───────────────────────────── */
.page-header-block {
  margin-bottom: 1rem;
  text-align: center; /* Or left if preferred site-wide */
}

.page-heading {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Brief quote block */
.page-quote {
  font-style: italic;
  margin-bottom: 1rem;
}

/* Main description under header */
.page-description {
  font-size: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}

/* ─────────────────────────────
   🧱 Masonry Gallery Wrapper
───────────────────────────── */
.page-wrapper {
  width: 95%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh; /* Default for all pages */
  padding-bottom: 3rem; /* ensures room for bottom content */
}

.page-wrapper.no-full-height {
  min-height: auto; /* Override only the min-height */
}

/* ─────────────────────────────
   🧱 Masonry Gallery Container
───────────────────────────── */
.page-container {
  column-count: 4;                 /* Defines 4 masonry columns */
  column-gap: 1rem;                /* Gap between columns */
  width: 100%;                     /* Full width of the wrapper */
  margin-top: 0;                   /* Remove top margin for the container */
}

/* ─────────────────────────────
   🧾 Masonry Heading Styles
───────────────────────────── */
.page-heading {
  text-align: left;                /* Align text to the left */
  margin-bottom: 5px;              /* Minimal spacing below heading */
  margin-top: 90px;               /* No spacing above heading */
  font-size: 2rem;                 /* Heading font size */
  font-weight: 400;                /* Font weight */
  -webkit-font-smoothing: antialiased; /* Smoothing for better appearance */
  -moz-osx-font-smoothing: grayscale;
  font-variant: small-caps;        /* Small caps style */
  color: black;                    /* Text color */
  width: 100%;                     /* Full width of the wrapper */
}

/* ─────────────────────────────
   💬 Quote Block Styling
───────────────────────────── */
.page-quote {
  font-size: 2rem;                 /* Slightly larger font size for emphasis */
  font-style: italic;             /* Italicize the text for a quote effect */
  color: red;                    /* Darker grey text color for a soft appearance */
  border-left: 4px solid #007bff; /* Blue left border to visually separate the quote */
  padding-left: 50px;             /* Adds space between the border and the text */
  margin: 20px 0;                 /* Space around the quote */
  position: relative;             /* For positioning quote marks if needed */
  text-align: left;
}

/* ─────────────────────────────
   🖼️ Mockup Intro Block
───────────────────────────── */
.mockup-intro-block {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
  max-width: 900px;
  margin-left: 3rem;       /* Increase slightly from previous 1.5rem */
  margin-right: auto;
  text-align: left;
}

/* ─────────────────────────────
   ✍️ Text Styling Utilities
───────────────────────────── */
.bold-text {
  font-weight: bold;
  font-style: normal;
}
/* ─────────────────────────────
   📏 Quote Override (global style)
───────────────────────────── */
.page-quote {
  font-size: 1rem;             /* Slightly larger font size for emphasis */
  font-style: italic;           /* Italicize the text for a quote effect */
  color: #555;                  /* Darker grey text color for a soft appearance */
  border-left: 4px solid #007bff; /* Blue left border to visually separate the quote */
  padding-left: 20px;           /* Adds space between the border and the text */
  margin: 20px 0;               /* Space around the quote */
  position: relative;           /* For positioning quote marks if needed */
  text-align: left;
}
/* ─────────────────────────────
   🖼️ Featured Image Setup
───────────────────────────── */
.featured-image {
  float: left;
  margin: 0 15px 15px 0;
  border: 1px solid gray;
  max-width: 200px; /* Adjust based on your design */
  height: auto;
}

/* ─────────────────────────────
   🔠 Section Headings & Helpers
───────────────────────────── */
.section-heading {
  clear: both;
  font-size: 1.5em;
  margin-top: 20px;
}

.clear-both {
  clear: both;
}

/* ─────────────────────────────
   🅿️ Paragraph Styles
───────────────────────────── */
p {
  color: black;
  font-style: normal;
  font-size: 0.9rem; /* Slightly larger font size for emphasis */
  text-align: left;
}

/* ─────────────────────────────
   📱 Responsive: Tablet Styles
───────────────────────────── */
@media (max-width: 768px) {
  p {
    color: black;
    font-style: normal;
    font-size: 0.9rem; /* Adjusted for better readability */
  }

  .page-quote {
    font-size: 0.9rem;             /* Slightly larger font size for emphasis */
    font-style: italic;           /* Italicize the text for a quote effect */
    color: #555;                  /* Darker grey text color for a soft appearance */
    border-left: 4px solid #007bff; /* Blue left border to visually separate the quote */
    padding-left: 20px;           /* Adds space between the border and the text */
    margin: 20px 0;               /* Space around the quote */
    position: relative;           /* For positioning quote marks if needed */
    text-align: left;
  }
}



/* ─────────────────────────────
   📱 Responsive: Mobile Styles
───────────────────────────── */
@media (max-width: 480px) {
  p {
    font-size: 0.8rem; /* Even smaller for tiny screens */
  }
  
    .content-wrapper {
  width: 95%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100dvh; /* Default for all pages */
  padding-bottom: 3rem; /* ensures room for bottom content */
}
}