/* Learn hub (/learn). Loaded only by catalog/controller/information/learn.php; ?v= is the file's sha256. */
.ptt-learn { display: block; max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; box-sizing: border-box; color: #334155; font-size: 16px; line-height: 1.55; }
.ptt-learn *, .ptt-learn *::before, .ptt-learn *::after { box-sizing: border-box; }

.ptt-learn-crumbs { padding: 12px 0 8px; font-size: 14px; color: #64748b; }
.ptt-learn-crumbs a { display: inline-block; padding: 6px 0; color: #0369a1; text-decoration: none; font-weight: 500; }
.ptt-learn-crumbs a:hover { text-decoration: underline; }

.ptt-learn-head h1 { margin: 4px 0 8px; font-size: 32px; line-height: 1.2; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
.ptt-learn-head p { margin: 0 0 24px; font-size: 17px; color: #475569; max-width: 60ch; }

.ptt-learn-featured { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0369a1 100%); border-radius: 16px; padding: 28px 24px; margin: 0 0 32px; color: #fff; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12); }
.ptt-learn-featured .ptt-learn-lead { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #fde68a; }
.ptt-learn-featured h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; font-weight: 800; color: #fff; }
.ptt-learn-featured .ptt-learn-featured-text { margin: 0 0 18px; font-size: 16px; color: #e2e8f0; max-width: 60ch; }
.ptt-learn-btn { display: inline-block; min-height: 48px; padding: 12px 22px; border-radius: 10px; background: #fff; color: #0f172a; font-size: 16px; font-weight: 700; line-height: 24px; text-decoration: none; }
.ptt-learn-btn:hover { background: #e0f2fe; color: #0f172a; text-decoration: none; }

.ptt-learn-section { margin: 0 0 28px; }
.ptt-learn-section > h2 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; font-size: 22px; line-height: 1.3; font-weight: 700; color: #0f172a; }

.ptt-learn-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ptt-learn-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: 18px 18px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04); list-style: none; }
.ptt-learn-card::before { content: none; }
.ptt-learn-card:hover { border-color: #0284c7; box-shadow: 0 6px 18px -2px rgba(15, 23, 42, 0.10); }
.ptt-learn-card h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; font-weight: 700; color: #0f172a; }
.ptt-learn-card h3 a { color: #0f172a; text-decoration: none; }
/* The whole card is the tap target; the title is the one real link. */
.ptt-learn-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.ptt-learn-card p { margin: 0 0 12px; font-size: 15px; color: #475569; }
.ptt-learn-more { margin-top: auto; font-size: 15px; font-weight: 700; color: #0369a1; }
.ptt-learn-card:hover .ptt-learn-more { text-decoration: underline; }

/* Visible keyboard focus */
.ptt-learn a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 4px; }
.ptt-learn-card h3 a:focus-visible { outline: none; }
.ptt-learn-card h3 a:focus-visible::after { outline: 3px solid #f59e0b; outline-offset: 2px; }
.ptt-learn-featured .ptt-learn-btn:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; border-radius: 10px; }

@media (min-width: 640px) {
  .ptt-learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ptt-learn-featured { padding: 32px; }
}
@media (min-width: 1000px) {
  .ptt-learn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptt-learn-head h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ptt-learn-card { transition: border-color .15s ease, box-shadow .15s ease; }
}