Box Model & Layout

.card {
  /* Content */
  width: 300px;
  height: 200px;   /* or auto to fit content */

  /* Padding — space INSIDE the border */
  padding: 20px;                    /* all 4 sides */
  padding: 20px 40px;               /* top-bottom left-right */
  padding: 10px 20px 30px 40px;    /* top right bottom left (clockwise) */
  padding-top: 10px;               /* individual sides */

  /* Border */
  border: 2px solid #4f9eff;      /* width style color */
  border-radius: 12px;             /* rounded corners */
  border-radius: 50%;              /* perfect circle (if w=h) */
  border-top: 4px solid orange;   /* one side only */

  /* Margin — space OUTSIDE the border */
  margin: 20px;                    /* all 4 sides */
  margin: 0 auto;                  /* centre block horizontally */
  margin-bottom: 2rem;             /* space below */
}

/* ✅ ALWAYS add this to your CSS reset */
* {
  box-sizing: border-box;
  /* padding and border are INCLUDED in width/height */
  /* Without this: width=300, padding=20 → total = 340px (surprise!) */
  /* With this:    width=300, padding=20 → total = 300px (expected!)  */
}

/* Make inline elements behave like blocks */
a.btn {
  display: inline-block;
  padding: 12px 24px;     /* works on inline-block! */
  width: 200px;            /* works on inline-block! */
  background: blue;
  color: white;
}

/* Hide an element completely */
.mobile-only {
  display: none;  /* invisible AND takes no space */
}

/* vs visibility: hidden = invisible but KEEPS its space */
.ghost {
  visibility: hidden;
}

/* vs opacity: 0 = invisible, keeps space, still clickable! */
.transparent {
  opacity: 0;
}

/* STATIC (default) — in normal document flow */
.normal { position: static; } /* top/right/bottom/left ignored */

/* RELATIVE — offset from its normal position */
.nudged {
  position: relative;
  top: 10px;    /* moves DOWN 10px from where it would be */
  left: 20px;   /* moves RIGHT 20px */
  /* original space is still reserved! */
}

/* ABSOLUTE — removed from flow, positioned relative to nearest */
/* positioned ancestor (parent with position != static)     */
.parent { position: relative; }   /* make parent the reference */
.badge {
  position: absolute;
  top: -8px;
  right: -8px;  /* top-right corner of parent */
}

/* FIXED — stays in viewport as page scrolls */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;  /* stays above everything */
}

/* STICKY — relative until scroll threshold, then fixed */
.sticky-header {
  position: sticky;
  top: 0;        /* sticks at top of viewport */
  z-index: 100;
}

/* Z-INDEX — stacking order (higher = in front) */
.modal-overlay { z-index: 1000; }
.modal         { z-index: 1001; }
.tooltip       { z-index: 1002; }
/* z-index only works on positioned elements (not static)! */

/* === WIDTH & HEIGHT === */
.container {
  width: 100%;          /* fills parent */
  max-width: 1200px;    /* never wider than 1200px */
  min-width: 320px;    /* never narrower than 320px */
  margin: 0 auto;       /* centres horizontally */
}

.hero {
  height: 100vh;       /* full viewport height */
  min-height: 400px;  /* at least 400px tall */
}

.auto-height {
  height: auto;        /* grows with content (default) */
}

/* === OVERFLOW === */
.box {
  overflow: visible;  /* default: spills out of box */
  overflow: hidden;   /* clips content at box edge */
  overflow: scroll;   /* always shows scrollbars */
  overflow: auto;     /* scrollbars only when needed ← use this */

  overflow-x: auto;   /* horizontal scroll only */
  overflow-y: hidden; /* no vertical overflow */
}

/* Truncate text with ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* shows "..." */
  max-width: 200px;
}

/* overflow: hidden clips child ::before and rounded borders too */
.image-card {
  border-radius: 12px;
  overflow: hidden;    /* clips the img to the rounded corners */
}