/* Practical field guides. Inherit the site's palette, type and RTL rules. */
.learn-container { max-width: 1200px; padding: 8.5rem 2rem 4rem; margin-inline: auto; }
.learn-container p { max-width: 62ch; color: var(--text-soft); line-height: 1.85; }
.learn-container h1 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); line-height: 1.22; margin-block: 1.25rem; }
body[dir="ltr"] .learn-container h1 { line-height: 1.04; letter-spacing: -0.035em; }
.learn-container h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.3; margin-block-end: 1.5rem; }
.learn-container h3 { font-size: 1.3rem; line-height: 1.4; margin-block-end: .8rem; }
.learn-container p + p { margin-block-start: 1rem; }
.learn-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; padding-block: 1rem 3.5rem; }
.learn-hero .btn { margin-block-start: 1.75rem; }
.learn-hero figure img { width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius); }
.learn-container figcaption { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin-block-start: .7rem; }
.learn-section { padding-block: 3.5rem; border-block-start: 1px solid var(--line-strong); scroll-margin-top: 7rem; }
.learn-section > p + h3 { margin-block-start: 2rem; }
.learn-note { padding: 1.25rem 1.5rem; border-inline-start: 3px solid var(--brand); background: var(--bg-card); max-width: none !important; }
.learn-section .learn-note { margin-block: 1.75rem; }
.learn-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.learn-guide { min-width: 0; }
.learn-guide > a { display: block; }
.learn-guide img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.learn-guide:first-child img { object-fit: contain; background: var(--bg-card); }
.learn-guide > div { padding-block-start: 1.5rem; }
.learn-guide h3 { min-height: 3.7em; }
.learn-link { display: inline-block; color: var(--brand); text-decoration: underline; text-underline-offset: .3em; padding-block: .65rem; font: inherit; background: transparent; border: 0; cursor: pointer; }
.learn-guide .learn-link { margin-block-start: .75rem; }
.learn-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.learn-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.learn-columns > div { min-width: 0; }
.learn-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-block-start: 1.75rem; }
.learn-heading { max-width: 850px; padding-block-end: 2.5rem; }
.learn-heading > p { font-size: 1.15rem; }
.learn-contents { padding-block: 1.5rem 2rem; border-block-start: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.learn-contents h2 { flex-basis: 100%; font-size: 1rem; margin-block-end: .3rem; color: var(--text-muted); }
.learn-gear-index { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-block: 1rem 2rem; }
.learn-gear-index a { font-size: .95rem; }
.learn-photo-hint { margin-block-start: 1rem; font-size: .9rem; }
.learn-gear-group { padding-block: 2rem 3rem; border-block-start: 1px solid var(--line); scroll-margin-top: 7rem; }
.learn-gear-group > h3 { font-size: 1.6rem; }
.learn-gear-group > p { margin-block-end: 2rem; }
.learn-kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
/* Product photographs have a fixed white ground, independent of the UI theme. */
.learn-kit figure { background: #fff; border-radius: var(--radius); padding: 1.25rem; }
.learn-kit figure a { display: block; }
.learn-kit .learn-equipment-photo { width: 100%; height: 230px; object-fit: contain; }
.learn-kit > div { padding-block-start: 1.25rem; }
.learn-kit h4 { font-size: 1.25rem; line-height: 1.4; margin-block-end: .7rem; }
.learn-kit[id], #equipment-sun-protection { scroll-margin-top: 7rem; }
.learn-kit:target { outline: 2px solid var(--brand); outline-offset: .75rem; border-radius: var(--radius); }
#equipment-sun-protection:target { outline: 2px solid var(--brand); outline-offset: .75rem; }
body[dir="ltr"] .learn-kit h4 { font-family: var(--display); letter-spacing: -.02em; }
.learn-kit > div > p:last-child { font-size: .95rem; }
.learn-kit .learn-tag { color: var(--brand); font-size: .85rem; margin-block-end: .6rem; }
.learn-photo-sources summary { cursor: pointer; min-height: 44px; align-content: center; color: var(--brand); }
.learn-wide-photo { margin-block-end: 2.5rem; }
.learn-wide-photo img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); }
.learn-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.learn-roles > div { padding-block: 1.5rem; border-block-end: 1px solid var(--line); }
.learn-roles dt { font-weight: 600; font-size: 1.2rem; margin-block-end: .75rem; }
.learn-roles dd { color: var(--text-soft); line-height: 1.85; }
.learn-check-items { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 2rem; margin-block: 1.5rem; }
.learn-check-items label { display: flex; align-items: start; gap: .85rem; min-height: 44px; padding-block: .85rem; border-block-end: 1px solid var(--line); cursor: pointer; }
.learn-check-items input { flex: 0 0 22px; width: 22px; height: 22px; margin-block-start: .25rem; accent-color: var(--brand); }
.learn-check-items label:has(input:checked) span { color: var(--text-muted); }
.learn-check-status { font-weight: 600; }
.learn-credit-list, .learn-source-list { padding-inline-start: 1.3rem; color: var(--text-muted); font-size: .9rem; overflow-wrap: anywhere; }
.learn-credit-list li, .learn-source-list li { padding-block: .4rem; }
.learn-credit-list a, .learn-source-list a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.learn-day { padding-inline-start: 1.5rem; max-width: 72ch; }
.learn-day li { padding-inline-start: 1rem; padding-block: .75rem 1.5rem; }
.learn-day li::marker { color: var(--brand); font-size: 1.2rem; }
.learn-faq details { border-block-end: 1px solid var(--line-strong); padding-block: 1.25rem; }
.learn-faq summary { cursor: pointer; font-size: 1.15rem; font-weight: 600; min-height: 44px; align-content: center; }
.learn-faq details p { padding-block: .75rem; }
.learning-page :focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.learn-skip { position: fixed; inset-block-start: .5rem; inset-inline-start: 1rem; z-index: 60; padding: .75rem 1rem; background: var(--bg); color: var(--text); transform: translateY(-180%); }
.learn-skip:focus { transform: translateY(0); }
@media (max-width: 1020px) {
  .learn-hero { gap: 2rem; }
  .learn-guides { gap: 1.5rem; }
}
@media (max-width: 880px) {
  .learn-kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-hero { grid-template-columns: 1fr; }
  .learn-hero figure img { height: 360px; }
  .learn-guides { grid-template-columns: 1fr; }
  .learn-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-block: 1rem; }
  .learn-guide > div { padding-block-start: 0; }
  .learn-guide h3 { min-height: 0; }
  .learn-three { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 600px) {
  .learn-container { padding: 7rem 1.25rem 2rem; }
  .learn-container h1 { font-size: 2.6rem; }
  .learn-hero { padding-block: 0 2rem; }
  .learn-hero figure img { height: 290px; }
  .learn-section { padding-block: 2.5rem; }
  .learn-guide, .learn-columns, .learn-kit-grid, .learn-roles, .learn-check-items { grid-template-columns: 1fr; }
  .learn-guide { gap: 1.25rem; }
  .learn-guides { gap: 2rem; }
  .learn-kit .learn-equipment-photo { height: 250px; }
  .learn-note { padding: 1rem; }
  .learn-contents { column-gap: 1.25rem; }
}
@media print {
  .learning-page { background: white; color: #10201a; }
  .learning-page .nav, .learning-page footer, .learn-skip, .scroll-progress, .cookie-banner,
  .learning-page #learning-main > :not(.learn-checklist), .learn-checklist .learn-actions, .learn-checklist .learn-note { display: none !important; }
  .learning-page .learn-container { padding: 0; max-width: none; }
  .learn-checklist { border: 0; padding: 0; }
  .learn-checklist p, .learn-checklist span { color: #10201a !important; }
  .learn-check-items { grid-template-columns: 1fr; }
  .learn-check-items label { break-inside: avoid; }
}