/* Horizontal Student ID Card - v1.5 */
:root { --brand:#3d3f95; --ink:#111827; --muted:#4b5563; --panel:#f6f9ff; --border:#e5e7eb; }
.acc-id-card-wrap { text-align:center; margin:12px 0; }
.acc-id-card-btn { display:inline-block; padding:10px 16px; border-radius:10px; background:var(--brand); color:#fff; text-decoration:none; font-weight:600; box-shadow:0 6px 18px rgba(61,63,149,.25); }
.acc-id-card-notice { background:#fff7ed; color:#7c2d12; padding:12px 14px; border:1px solid #fed7aa; border-radius:10px; font-size:14px; }
.print-tip { font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-align:center; margin:12px auto; color:#374151; max-width:980px; }

.acc-student-card { width:100%; max-width:980px; margin:0 auto; background:#ffffff; border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.10); border:1px solid var(--border); overflow:hidden; }
.card-top { background: var(--panel); padding: 10px 16px; display:flex; justify-content: center; align-items:center; min-height:70px; }
.logo img { width: 120px; height: auto; object-fit:contain; display:block; }

.card-content { display:grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 18px; }
.left-photo { background:#f3f4f6; border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center; }
.left-photo img { width: 100%; height: 320px; object-fit:cover; border-radius:10px; }

.right-details { background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.right-details .row { display:grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 8px 0; align-items:center; }
.right-details .label { font-weight:700; color:var(--ink); }
.right-details .value { color:var(--ink); }

.card-footer { background:linear-gradient(90deg, #2f327a, #5d5fe0); color:#fff; text-align:center; padding:10px 16px; font-weight:800; letter-spacing:.3px; }

.tools { max-width:980px; margin: 12px auto; text-align:right; }
.tools .dl-btn { background:var(--brand); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; }

@media print {
  body { background:#fff !important; margin:0 !important; padding:0 !important; }
  .print-tip, .tools { display:none !important; }
  .acc-student-card { box-shadow:none !important; border:1px solid #000; }
}
/* =========================================================
   FORCE 2-COLUMN MOBILE LAYOUT (photo left, details right)
   Put this AFTER the previous media queries so it overrides them
   ========================================================= */

/* phones ≤ 640px: keep two columns */
@media (max-width: 640px){
  .acc-student-card{width:100%; max-width:980px}
  .card-content{
    grid-template-columns: 140px 1fr !important; /* photo | details */
    gap: 10px !important;
    padding: 12px !important;
    align-items: start;
  }

  /* photo box */
  .left-photo{padding:8px; border-radius:10px; margin:0 !important;}
  .left-photo img{
    width:100%;
    height:auto;              /* keep aspect ratio */
    aspect-ratio: 3 / 4;      /* nice portrait proportion */
    object-fit: cover;
    border-radius:8px;
  }

  /* details table */
  .right-details{padding:10px 12px !important}
  .right-details .row{
    grid-template-columns: 110px 1fr !important; /* label | value */
    gap: 8px !important;
    padding: 6px 0 !important;
  }
  .right-details .label{font-size:12px}
  .right-details .value{font-size:12px; word-break: break-word;}

  /* header + footer tweaks */
  .card-top{min-height:auto; padding:8px 10px}
  .logo img{width:80px}
  .card-footer{padding:8px 10px; font-size:13px}
}

/* very small phones ≤ 360px: narrower photo but still 2 columns */
@media (max-width: 360px){
  .card-content{grid-template-columns: 120px 1fr !important}
  .right-details .row{grid-template-columns: 100px 1fr !important}
  .left-photo img{aspect-ratio: 2.7 / 4}
}