/* ==========================================================================
   Editorial Theme – About & Contact pages
   ========================================================================== */

/* ── Shared page layout ───────────────────────────────────────────────────── */
.spb-page-hero {
  position:        relative;
  overflow:        hidden;
  min-height:      320px;
  display:         flex;
  align-items:     flex-end;
  background:      var(--spb-surface, #f7f8fa);
}

.spb-page-hero__bg {
  position:   absolute;
  inset:      0;
  object-fit: cover;
  width:      100%;
  height:     100%;
}

.spb-page-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 100%);
}

.spb-page-hero__body {
  position:  relative;
  z-index:   1;
  padding:   3rem 1.25rem;
  width:     100%;
  max-width: var(--spb-container, 1280px);
  margin:    0 auto;
  color:     #fff;
}

.spb-page-hero__title {
  font-family: var(--spb-font-heading, inherit);
  font-size:   clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin:      0 0 .5rem;
}

.spb-page-hero__sub {
  font-size:   1.1rem;
  opacity:     .85;
}

/* ── About page ───────────────────────────────────────────────────────────── */
.spb-about {
  padding: var(--spb-spacing, 48px) 0;
}

.spb-about__inner {
  max-width:  var(--spb-container, 1280px);
  margin:     0 auto;
  padding:    0 1.25rem;
}

.spb-about__content {
  max-width:   720px;
  font-size:   1.05rem;
  line-height: 1.75;
  color:       var(--spb-text, #1a202c);
}

.spb-about__content p   { margin-bottom: 1.25rem; }
.spb-about__content h2,
.spb-about__content h3  { font-family: var(--spb-font-heading, inherit); margin-top: 2rem; }

/* Info tiles */
.spb-about__tiles {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  margin-top:            3rem;
}

.spb-tile {
  background:    var(--spb-surface, #f7f8fa);
  border-radius: var(--spb-radius, 6px);
  padding:       1.5rem;
  border:        1px solid var(--spb-border, #e2e8f0);
  text-align:    center;
}

.spb-tile__icon {
  font-size:     2rem;
  line-height:   1;
  margin-bottom: .5rem;
}

.spb-tile__value {
  font-family:  var(--spb-font-heading, inherit);
  font-size:    2.25rem;
  font-weight:  900;
  color:        var(--spb-primary, #e53e3e);
  line-height:  1;
  margin-bottom:.25rem;
}

.spb-tile__label {
  font-size:   .85rem;
  color:       var(--spb-muted, #718096);
  font-weight: 600;
}

/* ── Author section ───────────────────────────────────────────────────────── */
.spb-author {
  display:    flex;
  gap:        2rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding:    2rem;
  background: var(--spb-surface, #f7f8fa);
  border-radius: var(--spb-radius, 6px);
  border:     1px solid var(--spb-border, #e2e8f0);
}

.spb-author__photo-wrap {
  flex-shrink: 0;
}

.spb-author__photo {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
  border:        3px solid var(--spb-primary, #e53e3e);
}

.spb-author__body {
  flex: 1;
  min-width: 0;
}

.spb-author__role {
  font-size:      .75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--spb-primary, #e53e3e);
  margin-bottom:  .25rem;
}

.spb-author__name {
  font-family:  var(--spb-font-heading, inherit);
  font-size:    1.5rem;
  font-weight:  800;
  margin:       0 0 .75rem;
  color:        var(--spb-text, #1a202c);
}

.spb-author__bio {
  font-size:   1rem;
  line-height: 1.7;
  color:       var(--spb-muted, #718096);
  margin:      0;
}

/* ── Contact page ─────────────────────────────────────────────────────────── */
.spb-contact {
  padding: var(--spb-spacing, 48px) 0;
}

.spb-contact__inner {
  max-width: var(--spb-container, 1280px);
  margin:    0 auto;
  padding:   0 1.25rem;
  display:   grid;
  grid-template-columns: 1fr 400px;
  gap:       3rem;
  align-items: start;
}

/* Form */
.spb-contact-form {
  display:       flex;
  flex-direction: column;
  gap:           1.25rem;
}

.spb-contact-form__row {
  display: grid;
  gap:     1rem;
  grid-template-columns: 1fr 1fr;
}

.spb-field {
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
}

.spb-field label {
  font-size:   .8rem;
  font-weight: 700;
  color:       var(--spb-text, #1a202c);
}

.spb-field input,
.spb-field textarea {
  padding:       .65rem .85rem;
  border:        1px solid var(--spb-border, #e2e8f0);
  border-radius: var(--spb-radius, 6px);
  font-size:     .95rem;
  font-family:   var(--spb-font-body, inherit);
  color:         var(--spb-text, #1a202c);
  background:    var(--spb-bg, #fff);
  transition:    border-color .15s, box-shadow .15s;
  width:         100%;
}

.spb-field input:focus,
.spb-field textarea:focus {
  outline:      none;
  border-color: var(--spb-primary, #e53e3e);
  box-shadow:   0 0 0 3px rgba(229,62,62,.12);
}

.spb-field textarea {
  min-height:  140px;
  resize:      vertical;
}

.spb-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              .5rem;
  padding:          .75rem 1.75rem;
  background:       var(--spb-primary, #e53e3e);
  color:            #fff;
  border:           none;
  border-radius:    var(--spb-radius, 6px);
  font-size:        .95rem;
  font-weight:      700;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background .15s, transform .1s;
  align-self:       flex-start;
}

.spb-btn:hover   { background: var(--spb-secondary, #2b6cb0); }
.spb-btn:active  { transform: scale(.98); }
.spb-btn:disabled {
  opacity: .6;
  cursor:  not-allowed;
}

/* Form feedback */
.spb-form-msg {
  padding:          .75rem 1rem;
  border-radius:    var(--spb-radius, 6px);
  font-size:        .9rem;
  display:          none;
}

.spb-form-msg.is-success {
  display:    block;
  background: #f0fff4;
  color:      #276749;
  border:     1px solid #9ae6b4;
}

.spb-form-msg.is-error {
  display:    block;
  background: #fff5f5;
  color:      #c53030;
  border:     1px solid #feb2b2;
}

/* Sidebar info */
.spb-contact-info {
  background:    var(--spb-surface, #f7f8fa);
  border-radius: var(--spb-radius, 6px);
  padding:       2rem;
  border:        1px solid var(--spb-border, #e2e8f0);
}

.spb-contact-info__heading {
  font-family:  var(--spb-font-heading, inherit);
  font-size:    1.1rem;
  font-weight:  800;
  margin:       0 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--spb-primary, #e53e3e);
}

.spb-contact-info__item {
  display:       flex;
  gap:           .75rem;
  align-items:   flex-start;
  margin-bottom: 1rem;
  font-size:     .9rem;
  color:         var(--spb-text, #1a202c);
}

.spb-contact-info__icon {
  color:      var(--spb-primary, #e53e3e);
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
  margin-top:  .15rem;
}

/* Social links */
.spb-socials {
  display:   flex;
  gap:       .6rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.spb-social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.25rem;
  height:          2.25rem;
  border-radius:   50%;
  background:      var(--spb-border, #e2e8f0);
  color:           var(--spb-text, #1a202c);
  text-decoration: none;
  font-size:       .9rem;
  transition:      background .15s, color .15s;
}

.spb-social-link:hover {
  background: var(--spb-primary, #e53e3e);
  color:      #fff;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .spb-about__tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .spb-author {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }

  .spb-contact__inner {
    grid-template-columns: 1fr;
  }

  .spb-contact-form__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .spb-about__tiles {
    grid-template-columns: 1fr;
  }
}