/* ══════════════════════════════════════
   ABOUT ME — Custom page styles
   ══════════════════════════════════════ */

/* ── Hero ── */
.about-hero{position:relative;overflow:hidden;padding:160px 0 72px;min-height:560px;display:flex;align-items:center}
.about-hero__bg{position:absolute;inset:0;background:linear-gradient(135deg,#0D2E2E 0%,#1B5E5E 40%,#2A7A6E 100%)}
.about-hero__bg-img{position:absolute;right:0;top:0;width:50%;height:100%;object-fit:cover;object-position:center center;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.75) 20%,rgba(0,0,0,.4) 60%,transparent 90%);mask-image:linear-gradient(to left,rgba(0,0,0,.75) 20%,rgba(0,0,0,.4) 60%,transparent 90%);pointer-events:none}
.about-hero__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(13,46,46,.7) 0%,rgba(13,46,46,.2) 60%,transparent 100%);pointer-events:none}
.about-hero::after{display:none}
.about-hero .mj-container{position:relative;z-index:1;width:100%}
.about-hero__content{max-width:600px}

/* Breadcrumbs in hero */
.about-hero__breadcrumbs{margin-bottom:20px}
.about-hero__breadcrumbs a{font-size:.82rem;color:rgba(255,255,255,.9);text-decoration:none;border-bottom:none;background:rgba(255,255,255,.15);padding:4px 12px;border-radius:20px;font-weight:600;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.about-hero__breadcrumbs a+a::before{content:'›';margin:0 8px;color:rgba(255,255,255,.5)}

.about-hero__title{font-family:var(--mj-font-heading);font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:800;letter-spacing:-2px;line-height:1.05;color:#fff;margin-bottom:14px}
.about-hero__subtitle{font-size:1.15rem;color:rgba(255,255,255,.85);line-height:1.55;margin-bottom:28px;max-width:460px}

.about-hero__avatar{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.about-hero__avatar img{width:60px;height:60px;border-radius:50%;border:3px solid rgba(255,255,255,.3);object-fit:cover}
.about-hero__avatar strong{display:block;font-family:var(--mj-font-heading);font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.3px}
.about-hero__avatar span{font-size:.82rem;color:rgba(255,255,255,.75)}

.about-hero__badges{display:flex;flex-wrap:wrap;gap:8px}
.about-hero__badge{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.15)}

/* ── Stats bar ── */
.about-stats{background:#0d3b2e;padding:0;margin-top:-1px}
.about-stats__grid{display:flex;justify-content:space-around;max-width:var(--mj-container);margin:0 auto;padding:32px 24px}
.about-stats__item{text-align:center;flex:1;padding:0 12px;position:relative}
.about-stats__item+.about-stats__item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:32px;width:1px;background:rgba(255,255,255,.1)}
.about-stats__num{display:block;font-family:var(--mj-font-heading);font-size:2rem;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.2}
.about-stats__label{display:block;font-size:.72rem;color:rgba(255,255,255,.65);font-weight:600;letter-spacing:.5px;text-transform:uppercase}

/* ── Credibility strip ── */
.about-credibility{padding:32px 0;border-bottom:1px solid var(--mj-border);text-align:center}
.about-credibility__label{font-size:.68rem;text-transform:uppercase;letter-spacing:3px;color:var(--mj-text-light);font-weight:600;margin-bottom:20px}
.about-credibility__logos{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:16px}
.about-credibility__logos img{height:22px;width:auto;max-width:120px;opacity:.22;filter:grayscale(100%);transition:opacity .3s,filter .3s}
.about-credibility__logos img:hover{opacity:.65;filter:grayscale(0%)}
.about-credibility__more{font-size:.82rem;font-weight:600;color:var(--mj-accent);text-decoration:none;border-bottom:1px solid rgba(13,59,46,.2);transition:border-color .2s}
.about-credibility__more:hover{border-bottom-color:var(--mj-accent)}

/* ══════════════════════════════════════
   CONTENT AREA — two-column editorial
   ══════════════════════════════════════ */
.about-content{padding:64px 0 56px}
.about-body{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start;max-width:1100px;margin:0 auto}

/* ── Main article ── */
.about-content .mj-page-article__content{font-size:1.1rem;line-height:1.85;color:#3a3a3a}
.about-content .mj-page-article__content>*+*{margin-top:1.3em}

.about-content .mj-page-article__content h2{font-family:var(--mj-font-heading);font-size:1.65rem;font-weight:800;letter-spacing:-1.5px;color:var(--mj-text-dark);margin-top:64px;margin-bottom:4px;padding-top:20px;position:relative}
.about-content .mj-page-article__content h2::before{content:'';display:block;width:40px;height:3px;margin-bottom:14px;background:#0d3b2e;border-radius:2px}
.about-content .mj-page-article__content h3{font-family:var(--mj-font-heading);font-size:1.3rem;font-weight:700;letter-spacing:-1px;color:var(--mj-text-dark);margin-top:40px;margin-bottom:4px}

.about-content .mj-page-article__content a{color:#1a73b5;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2.5px;text-decoration-color:rgba(26,115,181,.35);border-bottom:none;transition:text-decoration-color .2s}
.about-content .mj-page-article__content a:hover{text-decoration-color:#1a73b5;border-bottom:none}
.about-content .mj-page-article__content strong{color:var(--mj-text-dark)}

.about-content .mj-page-article__content img{border-radius:12px;margin:8px 0;max-width:100%;height:auto}
.about-content .mj-page-article__content>p>img,.about-content .mj-page-article__content>figure img{border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.08)}

.about-content .mj-page-article__content .gallery,
.about-content .mj-page-article__content .wp-block-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:28px -40px;width:calc(100% + 80px)}
.about-content .mj-page-article__content .gallery img,
.about-content .mj-page-article__content .wp-block-gallery img{border-radius:8px;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;box-shadow:none}

.about-content .mj-page-article__content ul{padding-left:0;list-style:none}
.about-content .mj-page-article__content li{position:relative;padding-left:20px;margin-bottom:8px}
.about-content .mj-page-article__content li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:#0d3b2e}

.about-content .mj-page-article__content blockquote{border-left:none;background:#f8faf7;border-radius:16px;padding:28px 32px;margin:32px 0;position:relative;font-style:italic;color:#444;border:1px solid #e8ece5}
.about-content .mj-page-article__content blockquote::before{content:'"';position:absolute;top:12px;left:20px;font-size:3rem;color:#0d3b2e;opacity:.15;font-family:Georgia,serif;line-height:1}
.about-content .mj-page-article__content blockquote p{padding-left:0;margin:0}

.about-content .mj-page-article__content img[src$=".svg"]{height:28px;width:auto;display:inline-block;opacity:.3;filter:grayscale(100%);margin:0 12px 8px 0;border-radius:0;box-shadow:none;transition:opacity .3s,filter .3s;vertical-align:middle}
.about-content .mj-page-article__content img[src$=".svg"]:hover{opacity:.8;filter:grayscale(0%)}

.about-content .mj-page-article__content hr{border:none;height:1px;background:var(--mj-border);margin:48px 0}

.about-content .mj-page-article__content h2+p+ul,
.about-content .mj-page-article__content h3+ul{columns:2;column-gap:24px}
.about-content .mj-page-article__content h2+p+ul li,
.about-content .mj-page-article__content h3+ul li{break-inside:avoid;margin-bottom:10px}

/* ── Author sidebar card ── */
.about-author-card{position:sticky;top:100px;background:#fff;border:1px solid var(--mj-border);border-radius:20px;padding:28px 24px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.about-author-card__img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #e8ece5;margin-bottom:12px}
.about-author-card__name{display:block;font-family:var(--mj-font-heading);font-size:1rem;font-weight:800;letter-spacing:-.5px;color:var(--mj-text-dark);margin-bottom:4px}
.about-author-card__role{display:block;font-size:.75rem;color:var(--mj-text-light);margin-bottom:0}
.about-author-card__divider{border:none;height:1px;background:var(--mj-border);margin:16px 0}
.about-author-card__facts{list-style:none;padding:0;margin:0;text-align:left}
.about-author-card__facts li{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#555;padding:5px 0;border-bottom:1px solid #f0f0f0}
.about-author-card__facts li:last-child{border-bottom:none}
.about-author-card__facts li span{font-size:1rem;flex-shrink:0}
.about-author-card__links{display:flex;flex-direction:column;gap:8px}
.about-author-card__links a{font-size:.82rem;font-weight:600;color:var(--mj-accent);text-decoration:none;padding:8px 12px;border-radius:10px;background:#f0f5f0;transition:background .2s;border-bottom:none}
.about-author-card__links a:hover{background:#e8f0f8}

/* ══════════════════════════════════════
   CONNECT SECTION
   ══════════════════════════════════════ */
.about-connect{padding:64px 0 80px;border-top:1px solid var(--mj-border)}
.about-connect__heading{font-family:var(--mj-font-heading);font-size:1.8rem;font-weight:800;letter-spacing:-1px;color:var(--mj-text-dark);text-align:center;margin-bottom:36px}
.about-connect__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto}
.about-connect__card{background:#fff;border:1px solid var(--mj-border);border-radius:16px;padding:28px;text-align:center;transition:transform .3s,box-shadow .3s;display:block;text-decoration:none;color:inherit}
.about-connect__card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08);border-color:#ccc}
.about-connect__icon{font-size:2rem;display:block;margin-bottom:12px}
.about-connect__card strong{font-family:var(--mj-font-heading);font-size:1rem;font-weight:800;letter-spacing:-.5px;display:block;margin-bottom:6px}
.about-connect__card p{font-size:.85rem;color:var(--mj-text-light);line-height:1.5;margin-bottom:16px}
.about-connect__btn{display:inline-block;font-size:.82rem;font-weight:600;color:var(--mj-accent);text-decoration:none;margin-top:4px}


/* ══════════════════════════════════════
   MOBILE
   ══════════════════════════════════════ */
@media(max-width:999px){
    .about-body{grid-template-columns:1fr}
    .about-author-card{position:static;max-width:100%;margin:0 0 24px}
}
@media(max-width:768px){
    .about-hero{min-height:360px;padding:120px 0 52px}
    .about-hero__content{max-width:70%}
    .about-hero__title{font-size:1.9rem}
    .about-hero__subtitle{font-size:.95rem}
    .about-hero__bg-img{width:45%;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 50%,transparent 90%);mask-image:linear-gradient(to left,rgba(0,0,0,.5) 0%,rgba(0,0,0,.25) 50%,transparent 90%)}
    .about-hero__badges{display:none}
    .about-stats__grid{flex-wrap:wrap;gap:8px 0;padding:20px 12px}
    .about-stats__item{flex:0 0 33.33%;margin-bottom:12px}
    .about-stats__item::before{display:none}
    .about-stats__num{font-size:1.3rem}
    .about-stats__label{font-size:.62rem}
    .about-content{padding:40px 0 32px}
    .about-content .mj-page-article__content{font-size:1rem}
    .about-content .mj-page-article__content h2{font-size:1.4rem;margin-top:48px}
    .about-content .mj-page-article__content h3{font-size:1.15rem}
    .about-content .mj-page-article__content .gallery,
    .about-content .mj-page-article__content .wp-block-gallery{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}
    .about-content .mj-page-article__content h2+p+ul,
    .about-content .mj-page-article__content h3+ul{columns:1}
    .about-credibility__logos{gap:16px}
    .about-credibility__logos img{height:18px}
    .about-connect__grid{grid-template-columns:1fr;max-width:400px}
    .about-connect{padding:48px 0 56px}
}
@media(max-width:480px){
    .about-hero{min-height:280px}
    .about-hero__content{max-width:75%}
    .about-hero__avatar img{width:44px;height:44px}
    .about-stats__item{flex:0 0 50%}
}

/* ══════════════════════════════════════
   ABOUT STORY SECTIONS — rich personal content
   ══════════════════════════════════════ */

/* Chapter headings */
.about-chapter {
    margin-bottom: 64px;
}

.about-chapter__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mj-font-heading);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FF9500;
    margin-bottom: 10px;
}

.about-chapter__heading {
    font-family: var(--mj-font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -1.2px;
    color: var(--mj-text-dark);
    line-height: 1.2;
    margin-bottom: 4px;
    position: relative;
    padding-top: 16px;
}

.about-chapter__heading::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: #0d3b2e;
    border-radius: 2px;
    margin-bottom: 14px;
}

.about-chapter__body {
    font-size: 1.08rem;
    line-height: 1.85;
    color: #3a3a3a;
    margin-top: 16px;
}

.about-chapter__body p + p {
    margin-top: 1.2em;
}

.about-chapter__body strong {
    color: var(--mj-text-dark);
    font-weight: 700;
}

/* The Erbil moment — full bleed story card */
.about-moment {
    background: linear-gradient(135deg, #0d3b2e 0%, #1B5E5E 100%);
    border-radius: 20px;
    padding: 40px 44px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.about-moment::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255,149,0,.1), transparent 70%);
    pointer-events: none;
}

.about-moment__label {
    font-family: var(--mj-font-heading);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #FF9500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.about-moment__text {
    font-size: 1.1rem;
    line-height: 1.85;
    color: rgba(255,255,255,.9);
    font-style: italic;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}

.about-moment__text::before {
    content: '\201C';
    font-size: 4rem;
    color: rgba(255,149,0,.25);
    font-family: Georgia, serif;
    line-height: 1;
    position: absolute;
    top: -16px;
    left: -12px;
    pointer-events: none;
}

.about-moment__footer {
    font-family: var(--mj-font-heading);
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .5px;
    position: relative;
    z-index: 1;
}

/* DJ legacy timeline card */
.about-dj-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    border: 1px solid var(--mj-border);
    border-radius: 16px;
    overflow: hidden;
    margin: 32px 0;
}

.about-dj-card__accent {
    width: 6px;
    background: linear-gradient(to bottom, #FF9500, #0d3b2e);
}

.about-dj-card__body {
    padding: 24px 28px;
}

.about-dj-card__label {
    font-family: var(--mj-font-heading);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--mj-text-light);
    margin-bottom: 8px;
}

.about-dj-card__heading {
    font-family: var(--mj-font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mj-text-dark);
    letter-spacing: -.5px;
    margin-bottom: 8px;
}

.about-dj-card__text {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--mj-text);
}

.about-dj-card__stats {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.about-dj-card__stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.about-dj-card__stat-num {
    font-family: var(--mj-font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: #FF9500;
    letter-spacing: -1px;
    line-height: 1;
}

.about-dj-card__stat-label {
    font-size: .68rem;
    color: var(--mj-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Cats section */
.about-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0;
}

.about-cat-card {
    background: var(--mj-bg-soft);
    border: 1px solid var(--mj-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.about-cat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF9500, #e68600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(255,149,0,.25);
}

.about-cat-card__name {
    font-family: var(--mj-font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--mj-text-dark);
    letter-spacing: -.3px;
    margin-bottom: 3px;
}

.about-cat-card__meaning {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #FF9500;
    margin-bottom: 6px;
}

.about-cat-card__desc {
    font-size: .85rem;
    color: var(--mj-text);
    line-height: 1.6;
}

/* Legacy pullquote */
.about-legacy {
    background: var(--mj-bg-warm);
    border-radius: 16px;
    padding: 36px 40px;
    margin: 36px 0;
    border: 1px solid rgba(255,149,0,.15);
    text-align: center;
}

.about-legacy__quote {
    font-family: var(--mj-font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--mj-text-dark);
    letter-spacing: -.5px;
    line-height: 1.45;
    margin-bottom: 14px;
}

.about-legacy__quote em {
    font-style: normal;
    color: #0d3b2e;
}

.about-legacy__sub {
    font-size: .85rem;
    color: var(--mj-text-light);
    line-height: 1.6;
}

@media(max-width:768px) {
    .about-moment { padding: 28px 24px; }
    .about-moment__text { font-size: 1rem; }
    .about-cats { grid-template-columns: 1fr; }
    .about-chapter__heading { font-size: 1.4rem; }
    .about-legacy { padding: 24px 20px; }
    .about-legacy__quote { font-size: 1.1rem; }
    .about-dj-card__body { padding: 20px; }
}

/* ══════════════════════════════════════
   NARRATIVE PRESS FEATURES
   ══════════════════════════════════════ */

.about-press-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0 24px;
}

.about-press-card {
    background: #fff;
    border: 1px solid var(--mj-border);
    border-radius: 14px;
    padding: 18px 20px;
    transition: box-shadow .2s, border-color .2s;
}

.about-press-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    border-color: #ccc;
}

.about-press-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mj-border);
}

.about-press-card__logo {
    height: 20px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    opacity: .35;
    filter: grayscale(100%);
    transition: opacity .2s;
}

.about-press-card:hover .about-press-card__logo {
    opacity: .6;
}

.about-press-card__name {
    font-family: var(--mj-font-heading);
    font-size: .9rem;
    font-weight: 800;
    color: var(--mj-text-dark);
    letter-spacing: -.3px;
}

.about-press-card__count {
    font-family: var(--mj-font-heading);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FF9500;
    white-space: nowrap;
    background: rgba(255,149,0,.1);
    padding: 2px 8px;
    border-radius: 20px;
}

.about-press-card__stories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.about-press-card__stories li {
    font-size: .78rem;
    color: var(--mj-text);
    line-height: 1.5;
    padding-left: 14px;
    position: relative;
}

.about-press-card__stories li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0d3b2e;
    flex-shrink: 0;
}

@media(max-width:999px) {
    .about-press-features { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:599px) {
    .about-press-features { grid-template-columns: 1fr; }
}

/* Accessibility: Focus styles */
.about-press-card:focus-visible,
.about-credibility__more:focus-visible,
.about-link:focus-visible {
    outline: 2px solid #0d3b2e;
    outline-offset: 2px;
    border-radius: 8px;
}
