/* ================================================================
   sections/components.css
   ─────────────────────────────────────────────────────────────────
   Remaining section styles:
     - Skills
     - Laboratory (Projects)
     - Achievements
     - Contact
     - Footer
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   SKILLS
   ════════════════════════════════════════════════════════════════ */

.skills {
  background: var(--bg-dark);
  padding:    100px 0;
  position:   relative;
  overflow:   hidden;
}

.skills__header {
  text-align:     center;
  margin-bottom:  56px;
  position:       relative;
  z-index:        2;
}

.skills__subtitle {
  font-size:  0.9rem;
  color:      var(--text-muted);
  margin-top: 12px;
}

/* Auto-fill grid — cards wrap at 280px minimum */
.skills__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   24px;
  position:              relative;
  z-index:               2;
}

/* ── Individual skill card ────────────────────────────────────── */
.skill-card {
  background: var(--bg-card);
  border:     1px solid var(--border-color);
  padding:    32px 28px;
  position:   relative;
  transition: border-color 0.3s, transform 0.3s;
}

/* Gold-to-blue top accent bar — revealed on hover */
.skill-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity:    0;
  transition: opacity 0.3s;
}

.skill-card:hover {
  border-color: var(--accent-secondary);
  transform:    translateY(-4px);
}

.skill-card:hover::before {
  opacity: 1;
}

.skill-card__category {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.2em;
  color:          var(--accent-primary);
  text-transform: uppercase;
  margin-bottom:  6px;
}

.skill-card__name {
  font-family:   var(--font-serif);
  font-size:     1.35rem;
  font-weight:   300;
  color:         var(--text-primary);
  margin-bottom: 12px;
}

.skill-card__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
/* .tag is defined in global.css */


/* ════════════════════════════════════════════════════════════════
   LABORATORY (Projects)
   ════════════════════════════════════════════════════════════════ */

.laboratory {
  background: var(--bg-body);
  padding:    100px 0;
}

/* Header row: left = titles, right = filter buttons */
.laboratory__header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-bottom:   48px;
}

/* ── Filter buttons ── */
.lab-filters {
  display: flex;
  gap:     8px;
}

.filter-btn {
  font-family:    var(--font-display);
  font-size:      0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        8px 16px;
  background:     none;
  border:         1px solid var(--border-color);
  color:          var(--text-muted);
  cursor:         pointer;
  transition:     all 0.2s;
}

/* Active and hover state — gold border + text */
.filter-btn.active,
.filter-btn:hover {
  border-color: var(--accent-primary);
  color:        var(--accent-primary);
}

/* Cards grid — auto-fill at 340px minimum */
.lab-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   28px;
}

/* ── Individual project card ─────────────────────────────────── */
.lab-card {
  background: var(--bg-card);
  border:     1px solid var(--border-color);
  overflow:   hidden;
  transition: transform 0.3s, border-color 0.3s;
}

.lab-card:hover {
  transform:    translateY(-6px);
  border-color: rgba(107, 143, 194, 0.4);
}

/* Card header: type badge (left) + year (right) */
.lab-card__header {
  padding:         24px 24px 0;
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
}

.lab-card__type {
  font-family:    var(--font-display);
  font-size:      0.56rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--accent-primary);
  border:         1px solid rgba(232, 197, 71, 0.3);
  padding:        4px 10px;
}

.lab-card__period {
  font-family:    var(--font-display);
  font-size:      0.56rem;
  letter-spacing: 0.1em;
  color:          var(--text-muted);
}

/* Card body: title + description */
.lab-card__body {
  padding: 18px 24px 22px;
}

.lab-card__title {
  font-family:   var(--font-serif);
  font-size:     1.45rem;
  font-weight:   300;
  color:         var(--text-primary);
  margin-bottom: 8px;
}

.lab-card__desc {
  font-size:   0.87rem;
  color:       var(--text-muted);
  line-height: 1.65;
}

/* Card footer: tags (left) + view link (right) */
.lab-card__footer {
  padding:         14px 24px;
  border-top:      1px solid var(--border-color);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.lab-card__link {
  font-family:     var(--font-display);
  font-size:       0.58rem;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--accent-secondary);
  text-decoration: none;
  transition:      color 0.2s;
}

.lab-card__link:hover {
  color: var(--accent-primary);
}


/* ════════════════════════════════════════════════════════════════
   ACHIEVEMENTS
   ════════════════════════════════════════════════════════════════ */

.achievements {
  background: var(--bg-section-alt);
  padding:    100px 0;
  position:   relative;
  overflow:   hidden;
}

/* Subtle diagonal hatch pattern as section background texture */
.achievements::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent      39px,
    rgba(176, 196, 222, 0.02) 40px
  );
}

.achievements__header {
  text-align:    center;
  margin-bottom: 56px;
  position:      relative;
  z-index:       2;
}

/* Auto-fill grid at 280px minimum */
.achievements__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   24px;
  position:              relative;
  z-index:               2;
}

/* ── Plaque card (achievement tile) ─────────────────────────────
   Named "plaque" to reflect the award/recognition aesthetic.
   ─────────────────────────────────────────────────────────────── */
.plaque {
  background: var(--bg-card);
  border:     1px solid var(--border-color);
  padding:    32px 28px;
  position:   relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.plaque:hover {
  transform:  translateY(-4px);
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.3);
}

/* Gold-to-blue top accent ribbon */
.plaque__ribbon {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.plaque__date {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.15em;
  color:          var(--accent-primary);
  text-transform: uppercase;
  margin-bottom:  8px;
}

.plaque__title {
  font-family:   var(--font-serif);
  font-size:     1.2rem;
  font-weight:   300;
  color:         var(--text-primary);
  margin-bottom: 6px;
}

.plaque__org {
  font-size: 0.83rem;
  color:     var(--text-muted);
}


/* ════════════════════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════════════════════ */

.contact {
  background: var(--bg-dark);
  padding:    100px 0;
  position:   relative;
  overflow:   hidden;
}

/* Soft radial glow in the centre of the section */
.contact::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(
    ellipse 60% 70% at 50% 50%,
    rgba(107, 143, 194, 0.05) 0%,
    transparent 60%
  );
}

/* Two-column layout: invite copy (left) + form (right) */
.contact__inner {
  position:              relative;
  z-index:               2;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
}

/* ── Left: invitation copy ── */
.contact__eyebrow {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.62rem;
  letter-spacing: 0.2em;
  color:          var(--accent-primary);
  text-transform: uppercase;
  margin-bottom:  8px;
}

.contact__heading {
  font-family:   var(--font-serif);
  font-size:     clamp(2.5rem, 5vw, 3.5rem);
  font-weight:   300;
  color:         var(--text-primary);
  line-height:   1.15;
  margin-bottom: 16px;
}

.contact__heading em {
  font-style: italic;
  color:      var(--accent-secondary);
}

.contact__subtitle {
  font-size:     0.93rem;
  color:         var(--text-muted);
  line-height:   1.7;
  margin-bottom: 40px;
}

/* Stack of social/contact links */
.contact-links {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

/* Each link row — icon glyph + label + value */
.contact-link {
  display:         flex;
  align-items:     center;
  gap:             16px;
  text-decoration: none;
  padding:         15px 18px;
  border:          1px solid var(--border-color);
  background:      var(--bg-card);
  transition:      border-color 0.25s, transform 0.25s;
}

.contact-link:hover {
  border-color: var(--accent-primary);
  transform:    translateX(4px); /* slight right nudge on hover */
}

.contact-link__glyph {
  width:        34px;
  height:       34px;
  border:       1px solid var(--accent-secondary);
  display:      grid;
  place-items:  center;
  font-size:    0.95rem;
  flex-shrink:  0;
  color:        var(--accent-primary);
}

.contact-link__label {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.15em;
  color:          var(--text-muted);
  text-transform: uppercase;
  display:        block;
}

.contact-link__value {
  font-family: var(--font-serif);
  font-size:   1rem;
  color:       var(--text-primary);
}

/* ── Right: contact form ─────────────────────────────────────── */
.contact__form {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

/* Individual field wrapper */
.field {
  display:        flex;
  flex-direction: column;
  gap:            7px;
}

.field label {
  font-family:    var(--font-display);
  font-size:      0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* Shared input / textarea styles */
.field input,
.field textarea {
  background:  var(--bg-card);
  border:      1px solid var(--border-color);
  color:       var(--text-primary);
  font-family: var(--font-body);
  font-size:   0.93rem;
  padding:     13px 15px;
  outline:     none;
  transition:  border-color 0.2s;
  resize:      none; /* disable manual textarea resize */
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent-secondary);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}


/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */

.footer {
  background:  var(--bg-dark);
  border-top:  1px solid var(--border-color);
  padding:     48px 0;
}

/* Three-column grid: brand (left) · monogram (centre) · links (right) */
.footer__inner {
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  gap:                   40px;
}

/* Brand name + subtitle */
.footer__brand {
  font-family:  var(--font-serif);
  font-size:    1.4rem;
  font-weight:  300;
  color:        var(--text-secondary);
}

.footer__brand em {
  font-style: italic;
  color:      var(--accent-secondary);
}

.footer__sub {
  font-family:    var(--font-display);
  font-size:      0.56rem;
  letter-spacing: 0.14em;
  color:          var(--text-muted);
  text-transform: uppercase;
  margin-top:     4px;
}

/* Centred monogram + copyright */
.footer__center {
  text-align: center;
}

.footer__monogram {
  font-family:    var(--font-display);
  font-size:      0.9rem;
  letter-spacing: 0.15em;
  color:          var(--accent-primary);
  border:         1px solid rgba(232, 197, 71, 0.5);
  width:          42px;
  height:         42px;
  display:        grid;
  place-items:    center;
  margin:         0 auto 10px;
}

.footer__copy {
  font-family:    var(--font-display);
  font-size:      0.56rem;
  letter-spacing: 0.12em;
  color:          var(--text-muted);
  text-transform: uppercase;
}

/* Right-aligned nav links */
.footer__links {
  display:         flex;
  gap:             24px;
  justify-content: flex-end;
}

.footer__link {
  font-family:     var(--font-display);
  font-size:       0.58rem;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color 0.2s;
}

.footer__link:hover {
  color: var(--accent-primary);
}