/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/******************* CSS for staff single pages ********************/
/* Container & header */
.ss-person { padding: 24px 16px 64px; }
.ss-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom: 20px; }
.ss-name { margin:20px 0 20px; font-size: clamp(34px, 5vw, 56px); line-height:1.05; }
.ss-role { margin:0; font-size: clamp(16px, 2vw, 20px); opacity:.8; }

/* Two columns (Flexbox version) */
.ss-two-col {
  display: flex;
  align-items: flex-start;
  gap: 48px;           /* safe alias for column/row gap */
  margin-top: 20px;
}

/* Left = fluid, Right = fixed 360px */
.ss-left { 
  flex: 1 1 0;
  min-width: 0;        /* prevents overflow with large images */
}
.ss-contact { 
  flex: 0 0 500px;
  max-width: 500px;
}

/* Stack on mobile */
@media screen and (max-width: 980px) {
  .ss-two-col { flex-direction: column; }
  .ss-contact { flex: 0 0 auto; max-width: none; }
}

/* Fixed portrait “box” via CSS crop */
.ss-photo-crop {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: #f6f6f8;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.ss-photo-fill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}

/* Mobile: a little shorter */
@media screen and (max-width: 980px) {
  .ss-photo-crop { height: 420px; }
  .ss-photo-fill {
  position: block !important; }
    .ss-two-col {
    flex-direction: column;
    align-items: stretch;     /* <-- leyfir 100% breidd */
  }
  .ss-contact {
    flex: initial;
    max-width: 100%;
    width: 100%;
  }
  .card-like {
    width: 100%;              /* belt & axlabönd */
    box-sizing: border-box;   /* tryggir að padding telst inn í breiddina */
  }
}


/* Photo */
.ss-photo { margin:0; }
.ss-photo-img { width:100%; height:auto; display:block; border-radius:14px; }

/* Contact card */
.card-like {
    box-shadow: 0px 12px 18px -6px rgba(34, 56, 101, 0.04);;
    border-radius: 20px;
  padding:22px;
  background:#fff;
}
.ss-contact h3 { margin:0 0 8px; }
.ss-contact hr { margin:8px 0 12px; border:none; border-top:1px solid rgba(0,0,0,.08); }
.ss-contact-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ss-contact-list li { display:flex; align-items:center; gap:10px; }
.ss-contact a { text-decoration:none; }

/* Icons */
.ss-ico { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; }
.ss-ico svg { display:block; }

/* Social buttons */
.ss-social { margin-top:12px; display:flex; gap:10px; }
.ss-social__btn {
  display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.12); border-radius:8px; background:#fff;
  transition: transform .05s ease-in-out;
}
.ss-social__btn:hover { transform: translateY(-1px); }

/* Bio/content */
.ss-bio { margin-top: 32px; }

/* Optional: tighten width like your screenshot if not using Blocksy's container */
.ct-container.ss-person { max-width: 1100px; margin-inline:auto; }