/* ===========================
   PALETTE (tweak these hexes)
   ---------------------------
   Body bg........ #0f1214
   Card bg........ #11171b
   Text light..... #e8f0f2
   Subtle text.... #c7d1d5
   Accent button.. #1b4d4a
   Accent border.. #2a6e6a

   Section colors:
   - Header....... #0e2a36
   - Intro........ #15222b
   - Details...... #121d26
   - Contact...... #0f2520
   - Footer....... #0d1418

   Tile bg........ #1b2730
   Tile text...... #e8f0f2
   =========================== */

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #0f1214; /* Body bg */
  color: #e8f0f2;      /* Text light */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}

/* ===== Card Container ===== */
.card {
  width: 100%;
  max-width: 1200px;
  background: #11171b; /* Card bg */
  color: #e8f0f2;
  border-radius: 3px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* Add a consistent vertical gap between sections inside the card */
.card > section {
  margin-top: 8px;        /* Gap between sections */
  border-radius: 3px;     /* Soft corners per section */
  overflow: hidden;        /* Clip inner corners if needed */
}

/* ===== Header ===== */
.header {
  background: #555879; /* Header section color */
  color: #e8f0f2;
  padding: 20px;
  display: grid;
  border-radius: 3px;
  gap: 5px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "logo"
    "title"
    "tag";
  text-align: center;
  align-items: center;
}

@media (min-width: 720px) {
  .header {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo title"
      "tag  tag";
    text-align: left;
  }
}

.logo {
  grid-area: logo;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #DED3C4; /* small accent spot */
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

@media (min-width: 720px) {
  .logo { margin: 0; }
}

.logo svg {
  width: 44px;
  height: 44px;
  fill: #0e2a36;
}

h1 {
  grid-area: title;
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.tag {
  grid-area: tag;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 500;
  color: #c7d1d5; /* Subtle text */
  opacity: 0.95;
}

/* ===== Tile Grid ===== */
.grid {
  background: transparent;
  padding: 0;        /* section wrapper controls its own padding */
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; /* 1 col on mobile */
}

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Tile Grid2 ===== */
.grid2 {
  background: transparent;
  padding: 0;        /* section wrapper controls its own padding */
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; /* 1 col on mobile */
}

@media (min-width: 600px) {
  .grid2 { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 900px) {
  .grid2 { grid-template-columns: repeat(2, 1fr); }
}

/* Unified tile look (compact) */
.tile {
  background: #393E46;   /* Tile bg (unified color) */
  color: #e8f0f2;        /* Tile text */
  padding: 8px;         /* compact */
  text-align: center;
  border-radius: 3px;
  border: 0.5px solid rgba(255,255,255,0.04);
}

.tile h4 {
  margin: 0;
  font-size: 15px;       /* slightly smaller */
  font-weight: 700;
}

.tile p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #c7d1d5;        /* Subtle text */
}

/* Unified tile look (wide) */
.tile2 {
  background: transparent;   /* Tile bg (unified color) */
  color: #e8f0f2;        /* Tile text */
  padding: 8px;         /* compact */
  text-align: center;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.04);
}

.tile2 h4 {
  margin: 0;
  font-size: 15px;       /* slightly smaller */
  font-weight: 700;
}

.tile2 p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #c7d1d5;        /* Subtle text */
}

/* All tiles share same color now; the t1..t8 classes are optional.
   (Kept for future use if you want per-tile accents.) */

/* ===== Sections (each with a different color) ===== */
.intro {
  background: #15222b; /* Intro color */
  padding: 20px;
}

.details {
  background: #121d26; /* Details color */
  padding: 20px;
}

.contact {
  background: #0f2520; /* Contact color */
  padding: 20px;
}

/* ===== Contact Links ===== */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link {
  display: inline-block;
  padding: 8px 8px;
  border-radius: 3px;
  text-decoration: none;
  background: #1b4d4a;             /* Accent button */
  color: #e8f0f2;
  border: 0.5px solid #2a6e6a;       /* Accent border */
}

.link:hover {
  filter: brightness(1.06);
}

.link:focus-visible {
  outline: 2px solid #e8f0f2;
  outline-offset: 2px;
}

/* ===== Footer ===== */
.footer {
  margin-top: 4px;   /* Gap above footer */
  background: #0d1418; /* Footer color */
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  color: #c7d1d5;
}