/* ===========================================================
   IJAR — Book Publication page  (matches mockup 07)
   Prefix: .bk-   — never collides with other page CSS
   =========================================================== */

/* ── Hero: full-bleed book-publication artwork (mockup 07) ──────
   The source art (Book 01.png) has the books centre/right and feature
   hexagons on the left. Anchor the image to the RIGHT so the books show,
   and lay a navy left-to-transparent gradient over it so the hexagons are
   hidden and the heading/lead sit on clean navy. */
.hero--inner .wrap-lg{min-height:400px}
/* Follow the other inner-page heroes: book artwork anchored to the CONTENT right
   edge (not the viewport), contained, resting on the podium at the bottom. Fade
   the left edge generously into the navy (same smooth treatment as the other
   page heroes) so there is no hard seam; the navy bgcolor matches the image's
   dark edges so the top/right blend away too. */
.hero--inner .wrap-lg::after{
  top:0;bottom:0;width:54%;
  background:var(--hero-img) right bottom/contain no-repeat;
  /* feather the LEFT, TOP and RIGHT edges so the rectangular artwork melts into
     the navy instead of a hard cut (bottom kept solid so the podium stays). */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, transparent 20%, #000 52%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24%, #000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, transparent 20%, #000 52%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24%, #000 100%);
  mask-composite:intersect;
}

/* ── Hero action buttons strip ─────────────────────────────── */
.bk-cta-btns-sec{padding:0 0 0}
.bk-hero-btns{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:-24px;margin-bottom:8px}

/* ── Shared button styles ───────────────────────────────────── */
.bk-btn-gold{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--navy);font-family:var(--ff);font-size:14px;font-weight:700;padding:13px 26px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;transition:.25s;letter-spacing:.4px;white-space:nowrap}
.bk-btn-gold:hover{background:#e3a100;transform:scale(1.03)}
.bk-btn-outline{display:inline-flex;align-items:center;gap:9px;background:transparent;color:#fff;font-family:var(--ff);font-size:14px;font-weight:600;padding:12px 24px;border-radius:6px;border:1.5px solid rgba(255,255,255,.75);text-decoration:none;cursor:pointer;transition:.25s;white-space:nowrap}
.bk-btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── Benefit card row (6-column icon cards) ─────────────────── */
.bk-sec{padding:14px 0 8px}
.bk-benefits{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bk-benefit-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px 16px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.06);transition:.25s}
.bk-benefit-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.12);transform:translateY(-5px)}
.bk-bc-icon{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#eef3fb 0%,#dce8ff 100%);display:grid;place-items:center;margin:0 auto 14px;font-size:26px;color:var(--navy)}
.bk-benefit-card h3{font-size:14.5px;font-weight:700;color:var(--navy);margin:0 0 6px;line-height:1.25}
.bk-benefit-card p{font-size:12.5px;color:var(--text-2);margin:0;line-height:1.45}

/* ── Why publish section ────────────────────────────────────── */
.bk-why-sec{background:#fff;padding:14px 0}
.bk-why-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.bk-eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.bk-sec-h{font-size:30px;font-weight:700;color:var(--navy);margin:0 0 20px;line-height:1.25}
/* gold underline accent under the Why-Publish heading (per mockup) */
.bk-why-content .bk-sec-h{margin-bottom:22px}
.bk-why-content .bk-sec-h::after{content:"";display:block;width:38px;height:3px;background:var(--gold);border-radius:2px;margin:12px 0 0}
.bk-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.bk-checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#444;line-height:1.55}
/* bullet: gold circle with a bold white tick */
.bk-checklist .bk-tick{flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;margin-top:3px}
.bk-checklist .bk-tick i{color:#fff;font-size:8.5px;line-height:1;-webkit-text-stroke:.6px #fff}
.bk-why-img{text-align:center}
.bk-cover-img{width:100%;max-width:540px;height:auto;border-radius:12px;box-shadow:0 16px 40px rgba(0,26,77,.20)}

/* ── Publication process ────────────────────────────────────── */
.bk-process-sec{padding:14px 0}
/* left-aligned heading with a short gold underline (per mockup) */
.bk-sec-head{text-align:left;margin-bottom:18px}
.bk-sec-head .bk-sec-h{margin-bottom:0}
.bk-sec-head .bk-sec-h::after{content:"";display:block;width:54px;height:3px;background:var(--gold);border-radius:2px;margin:12px 0 0}
.bk-process-steps{display:flex;align-items:flex-start;gap:0;justify-content:space-between;flex-wrap:nowrap}
.bk-pstep{flex:1 1 0;text-align:center;padding:0 6px;max-width:185px;min-width:0;position:relative}
.bk-pstep-circle{width:78px;height:78px;border-radius:50%;background:var(--navy);display:grid;place-items:center;margin:0 auto 16px;font-size:31px;color:#fff;box-shadow:0 6px 18px rgba(0,26,77,.18);position:relative;z-index:1}
.bk-pstep-circle i{line-height:1}
.bk-pstep h3{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 7px;line-height:1.3}
.bk-pstep p{font-size:13px;color:var(--text-2);line-height:1.55;margin:0}
/* light chevron arrow between steps, vertically centred on the circles */
.bk-pstep-arrow{flex:0 0 auto;align-self:flex-start;margin-top:28px;color:#c4ccda;font-size:18px;line-height:1;padding:0 2px}

/* ── Guidelines + Support two-column ───────────────────────── */
.bk-gs-sec{background:#fff;padding:14px 0}
.bk-gs-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bk-gs-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.bk-gs-hd{background:var(--navy);color:#fff;font-size:16px;font-weight:700;padding:14px 22px}
.bk-gs-hd i{color:var(--gold);font-size:15px}
.bk-gs-body{padding:16px 24px}

/* guidelines list */
.bk-gs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.bk-gs-list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--text);line-height:1.55}
.bk-gs-list li i{color:var(--navy);font-size:14px;flex-shrink:0;margin-top:2px}

/* publishing support: single-line items on the left, books+globe image on the right */
.bk-ps-body{display:flex;align-items:center;gap:8px}
.bk-ps-list{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px}
.bk-ps-list li{display:flex;gap:13px;align-items:center}
.bk-ps-list .bk-ps-icon{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:13px;
  box-shadow:0 3px 10px rgba(0,26,77,.18)}
.bk-ps-list .bk-ps-icon i{line-height:1;display:inline-block;color:#fff;font-size:13px}
.bk-ps-title{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.3}
.bk-ps-img{flex:0 0 auto;width:46%;max-width:300px;height:auto;align-self:center;mix-blend-mode:multiply}

/* faint open-book watermark on the left guidelines card (per mockup) */
.bk-gs-card:first-child .bk-gs-body{position:relative;overflow:hidden}
.bk-gs-card:first-child .bk-gs-body::after{content:"\f518";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:20px;bottom:8px;font-size:96px;color:rgba(0,43,127,.05);pointer-events:none;z-index:0}
.bk-gs-card:first-child .bk-gs-list{position:relative;z-index:1}

/* ── CTA section ────────────────────────────────────────────── */
.bk-cta-sec{padding:0 0 16px}
.bk-cta-inner{background:linear-gradient(135deg,#041b4d 0%,#0a2c73 60%,#1246a0 100%);border-radius:14px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bk-cta-text{flex:1;min-width:220px;display:flex;align-items:center;gap:18px}
.bk-cta-text>div{min-width:0}
.bk-cta-ico{font-size:36px;color:var(--gold);flex-shrink:0}
.bk-cta-text h2{font-size:24px;font-weight:700;color:#fff;margin:0 0 5px;line-height:1.25}
.bk-cta-text p{font-size:14px;color:#d9e3f0;margin:0;line-height:1.55}
.bk-cta-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;flex-shrink:0}

/* ── Stats bar ──────────────────────────────────────────────── */
.bk-stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:linear-gradient(135deg,#0a3072 0%,#001a4d 100%);border-radius:8px;padding:18px;box-shadow:0 12px 30px rgba(0,26,77,.16)}
.bk-stat{display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;position:relative}
.bk-stat:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:48px;background:rgba(255,255,255,.18)}
.bk-stat i{font-size:32px;flex-shrink:0}
.bk-stat b{font-size:25px;font-weight:500;display:block;line-height:1.1}
.bk-stat span{font-size:12.5px;color:rgba(255,255,255,.72)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .bk-benefits{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:960px){
  .bk-why-wrap{grid-template-columns:1fr;gap:30px}
  .bk-why-img{order:-1}
  .bk-cover-img{max-width:260px}
  .bk-gs-wrap{grid-template-columns:1fr}
  .bk-process-steps{flex-wrap:wrap;justify-content:center;gap:24px}
  .bk-pstep-line{display:none}
  .bk-pstep{max-width:180px}
  .bk-stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .bk-stat:nth-child(3)::before{display:none}
  .bk-cta-inner{flex-direction:column;text-align:center;padding:32px 28px}
  .bk-cta-text{justify-content:center}
  .bk-cta-nums{justify-content:center}
  .bk-cta-actions{justify-content:center;width:100%}
  .bk-hero-btns{margin-top:-8px}
}

@media(max-width:768px){
  .bk-benefits{grid-template-columns:repeat(2,1fr)}
  .bk-sec-h{font-size:24px}
  .bk-cta-text h2{font-size:22px}
  /* Process steps: 3 per row max at 768 */
  .bk-pstep{max-width:160px}
}

@media(max-width:640px){
  /* Go 2-up before the fixed 80px step circles overflow a too-narrow flex:1
     row in the 561–600px band (closes the breakpoint gap). */
  .bk-pstep{flex:0 0 calc(50% - 12px);max-width:calc(50% - 12px)}
}

@media(max-width:560px){
  .bk-benefits{grid-template-columns:1fr}
  .bk-stats{grid-template-columns:1fr}
  .bk-stat::before{display:none}
  .bk-hero-btns{flex-direction:column;align-items:flex-start;margin-top:0}
  .bk-btn-gold,.bk-btn-outline{width:100%;justify-content:center;box-sizing:border-box}
  .bk-cta-nums{gap:18px}
  /* CTA banner: reduce padding, stack icon+text vertically */
  .bk-cta-inner{padding:24px 20px}
  .bk-cta-text{flex-direction:column;align-items:center;gap:12px}
  .bk-cta-ico{font-size:28px}
  .bk-cta-text h2{font-size:20px}
}

@media(max-width:480px){
  /* Hero buttons */
  .bk-hero-btns{gap:10px}
  /* Why-publish image: constrain to viewport */
  .bk-cover-img{max-width:200px}
  /* CTA actions: stack buttons */
  .bk-cta-actions{flex-direction:column;width:100%}
  /* Process steps: 1-col below 480 */
  .bk-pstep{flex:0 0 100%;max-width:220px}
  /* Stats dividers: clear for 2-col rows */
  .bk-stat:nth-child(even)::before{display:none}
}

@media(max-width:360px){
  /* Process steps: no wider than viewport */
  .bk-pstep{max-width:100%}
  /* Benefit cards: ensure text doesn't overflow */
  .bk-benefit-card{padding:18px 12px}
  .bk-bc-icon{width:58px;height:58px;font-size:22px}
  /* CTA section: tightest padding */
  .bk-cta-inner{padding:20px 14px}
  .bk-gs-body{padding:16px}
  .bk-sec-h{font-size:22px}
}