/* ===========================================================
   IJAR — Archives (Past Issues) page styles
   Matches mockup 06.IJAR - Archives (Past Issue)
   =========================================================== */

.ar-sec{padding:26px 0 40px}
/* archives hero lead: keep first sentence on one line */
.hero p.lead{max-width:600px}
.hero-cta .btn-outline i{color:var(--gold)}
.ar-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.ar-head i{color:var(--navy);font-size:21px}
.ar-head h2{font-size:25px;font-weight:700;color:var(--navy);margin:0}

.ar-wrap{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}

/* ---- Archive by Year grid ---- */
.ar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ar-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:18px 18px 18px;box-shadow:0 2px 10px rgba(0,26,77,.05);display:flex;flex-direction:column;align-items:stretch;text-align:center;transition:.25s}
.ar-card:hover{box-shadow:0 12px 26px rgba(0,26,77,.12);transform:translateY(-3px)}
.ar-card-top{display:flex;align-items:center;justify-content:flex-start;gap:13px;margin-bottom:12px}
.ar-ic{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.ar-yr{font-size:26px;font-weight:800;color:var(--navy);line-height:1;display:inline-block}
.ar-yr::after{content:"";display:block;width:100%;height:3px;background:var(--gold);border-radius:2px;margin-top:8px}
.ar-meta{font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:14px}
.ar-btn{align-self:center;display:inline-block;border:1.5px solid var(--navy);color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.4px;padding:6px 20px;border-radius:6px;text-decoration:none;transition:.2s}
.ar-btn:hover{background:var(--navy);color:#fff}

.ar-more{display:flex;justify-content:center;margin-top:22px}
.ar-more a{background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:8px 26px;border-radius:7px;text-decoration:none;display:inline-flex;gap:10px;align-items:center;transition:.2s}
.ar-more a:hover{background:var(--dark)}

/* ---- By Year / By Month browser ---- */
.ar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ar-toggle{display:inline-flex;background:#eef2f8;border:1px solid var(--border);border-radius:8px;padding:4px;gap:4px}
.ar-toggle button{border:0;background:transparent;color:var(--text-2);font-family:var(--ff);font-size:13px;font-weight:600;padding:8px 18px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.2s}
.ar-toggle button i{font-size:12px}
.ar-toggle button.active{background:var(--navy);color:#fff}

.ar-view{display:none}
.ar-view.active{display:block}

/* year blocks (year -> months grid) */
.ar-year{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,26,77,.04)}
/* collapsible year card: clickable header + chevron; .collapsed hides the months */
.ar-year-h{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#001a4d,#0a3072);color:#fff;padding:11px 46px 11px 18px;cursor:pointer;position:relative;user-select:none}
.ar-year-h::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:13px;color:rgba(255,255,255,.85);transition:transform .25s}
.ar-year.collapsed .ar-year-h::after{transform:translateY(-50%) rotate(-90deg)}
.ar-year.collapsed .ar-months{display:none}
.ar-year-h b{font-size:18px;font-weight:700;letter-spacing:.5px}
.ar-year-h span{font-size:12.5px;color:rgba(255,255,255,.78)}
.ar-months{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}
.ar-month{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:7px;padding:10px 12px;text-decoration:none;color:var(--navy);font-size:13.5px;font-weight:600;background:#fff;transition:.18s}
.ar-month i{font-size:13px;color:var(--gold-2)}
.ar-month:hover{border-color:var(--royal);background:#f5f8fe;transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,26,77,.10)}

/* by-month view (month -> year chips) */
.ar-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ar-mcard{border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,26,77,.04)}
.ar-mcard-h{display:flex;align-items:center;gap:9px;background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:11px 16px;border-bottom:1px solid var(--border)}
.ar-mcard-h i{color:#fff}
/* equal-size year boxes: 4-col grid so every chip is identical width regardless of content */
.ar-yrchips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:13px 14px}
.ar-yrchips a{font-size:12px;font-weight:600;color:var(--navy);background:#eef2f8;border:1px solid var(--border);border-radius:5px;padding:6px 0;text-align:center;text-decoration:none;transition:.18s}
.ar-yrchips a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

@media(max-width:560px){
  .ar-months{grid-template-columns:repeat(2,1fr)}
  .ar-mgrid{grid-template-columns:1fr}
}

/* ---- Sidebar ---- */
.ar-box{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:18px;box-shadow:0 2px 10px rgba(0,26,77,.05)}
.ar-box-h{background:var(--navy);color:#fff;font-size:16px;font-weight:700;padding:14px 18px}
.ar-box-b{padding:18px}
.ar-field{margin-bottom:12px;position:relative}
.ar-field input,.ar-field select{width:100%;border:1px solid var(--border);border-radius:7px;padding:11px 14px;font-family:var(--ff);font-size:14px;color:var(--text);outline:none;background:#fff;appearance:none}
.ar-field input:focus,.ar-field select:focus{border-color:var(--royal)}
.ar-field .fic{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-2);font-size:14px;pointer-events:none}
.ar-search-btn{width:100%;background:var(--navy);color:#fff;border:0;border-radius:7px;padding:10px;font-family:var(--ff);font-size:13px;font-weight:600;letter-spacing:.6px;cursor:pointer;transition:.2s}
.ar-search-btn:hover{background:var(--dark)}

.ar-info{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.ar-info li{display:flex;gap:13px;align-items:flex-start}
.ar-info .ic{width:42px;height:42px;border-radius:50%;background:rgba(0,43,127,.08);color:var(--navy);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.ar-info li>div{display:flex;flex-direction:column}
.ar-info b{display:block;color:var(--navy);font-size:14.5px;margin:0 0 3px;font-weight:700;line-height:1.3}
.ar-info span{font-size:13px;color:var(--text-2);line-height:1.5}

.ar-help{background:#FBF1D6;border:1px solid #F0DA92;border-radius:8px;padding:20px}
.ar-help h3{color:var(--navy);font-size:18px;margin:0 0 15px}
.ar-help ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:13px}
.ar-help li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--text);line-height:1.5}
.ar-help li i{color:var(--navy);margin-top:3px;width:16px;text-align:center;flex-shrink:0}
.ar-help a.btn-navy{display:inline-block;margin-left:28px;background:var(--navy);color:#fff;font-size:12px;font-weight:600;letter-spacing:.4px;padding:7px 22px;border-radius:6px;text-decoration:none;transition:.2s}
.ar-help a.btn-navy:hover{background:var(--dark)}

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

@media(max-width:960px){
  .ar-wrap{grid-template-columns:1fr;gap:30px}
  .ar-grid{grid-template-columns:repeat(2,1fr)}
  .ar-stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .ar-stat:nth-child(3)::before{display:none}
}
@media(max-width:560px){
  .ar-grid{grid-template-columns:1fr}
  .ar-stats{grid-template-columns:1fr}
  .ar-stat::before{display:none}
}

/* ============================================================
   RESPONSIVE — archives-page.css
   Breakpoints: 768, 480, 360
   ============================================================ */

/* --- 768px -------------------------------------------------- */
@media(max-width:768px){
  /* toolbar: heading + toggle wrap to two lines, toggle full-width */
  .ar-toolbar{flex-direction:column;align-items:flex-start;gap:10px}
  .ar-toggle{width:100%}
  .ar-toggle button{flex:1;justify-content:center;padding:9px 10px}

  /* year-header: prevent long span from overflowing */
  .ar-year-h{flex-wrap:wrap;gap:6px}
  .ar-year-h b{font-size:16px}

  /* month grid: 4→2 (already at 560 but guard 768 too) */
  .ar-months{grid-template-columns:repeat(2,1fr)}

  /* by-month 3-col → 2-col */
  .ar-mgrid{grid-template-columns:repeat(2,1fr)}

  /* sidebar boxes: ensure fields don't overflow */
  .ar-field input,.ar-field select{font-size:13px}

  /* help box address word-wrap */
  .ar-help li{align-items:flex-start}
  .ar-help span,.ar-help a{word-break:break-word}

  /* stats numbers scale down */
  .ar-stat b{font-size:22px}
  .ar-stat i{font-size:28px}
}

/* --- 480px -------------------------------------------------- */
@media(max-width:480px){
  /* archive section padding */
  .ar-sec{padding:18px 0 28px}

  /* year-header text */
  .ar-year-h b{font-size:15px}
  .ar-year-h span{font-size:11.5px}

  /* month grid stays 2-col (readable at 480), months tap-friendly */
  .ar-month{padding:11px 8px;min-height:44px;font-size:13px;gap:7px}
  .ar-month i{font-size:12px}

  /* by-month 2→1 */
  .ar-mgrid{grid-template-columns:1fr}

  /* stats bar compact */
  .ar-stat b{font-size:20px}
  .ar-stat i{font-size:26px}
  .ar-stats{padding:22px 14px}

  /* more button full-width */
  .ar-more a{width:100%;justify-content:center}

  /* help box */
  .ar-help{padding:16px}
  .ar-help h3{font-size:16px}
  .ar-help a.btn-navy{margin-left:0;display:block;text-align:center}
}

/* --- 360px -------------------------------------------------- */
@media(max-width:360px){
  /* toggle buttons smaller text — keep tap target >=40px */
  .ar-toggle button{font-size:12px;padding:8px 8px;min-height:40px}

  /* month grid → 1-col at 360 to avoid cramping */
  .ar-months{grid-template-columns:1fr}

  /* heading */
  .ar-head h2{font-size:20px}

  /* sidebar search form */
  .ar-field input,.ar-field select{padding:10px 12px;font-size:12.5px}
  .ar-search-btn{font-size:12px;padding:9px}

  /* stats */
  .ar-stat{gap:10px}
  .ar-stat b{font-size:18px}
  .ar-stat i{font-size:22px}
}