/* Academy "favorite gear" module (Camera Bags) — used by snippet_academy_gear_rail
   A wrapping grid on both pages; .gear-rail--compact = the single course page's content-column styling.
   Tile styles copied from the course page featured-gear tiles (alpha_camera_academy_single_course_css.css) */


/* ---- the tile grid ---------------------------------------------------------------------------
   Same grid as "Featured gear" on the single course page (.course-page__featured-gear-grid in
   alpha_camera_academy_single_course_css.css): fixed 200px columns, 24px gap. Below 576px that
   would be a single 200px column, so phones get two fluid columns instead; the tile image is
   width:100% + aspect-ratio so it follows. Plain CSS on server-rendered markup, so it is laid out
   correctly from the first paint and works with JavaScript off. (Carousel until 2026-09-21.) */
.gear-rail__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  align-items: start;
}
@media (min-width: 576px) {
  .gear-rail__track {
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 24px;
  }
}
.gear-rail__slide { min-width: 0; }
.gear-rail__slide[hidden] { display: none; }

/* The instructor page wraps the module in a padded gray band (.gear-rail-section). The page only
   renders it when the instructor has a bag, but a bag can still produce no tiles (not attached to
   a course, or no items) - hide the band then, so it never shows up empty. */
.gear-rail-section:not(:has(.gear-rail)) { display: none; }

.gear-rail__title {
  font-family: 'SSTProBold', sans-serif;
  font-weight: 700;
}

/* ---- compact mode: inside a content column (single course page) ---- */
.gear-rail--compact {
  border-top: 1px solid #E9EAEB;   /* mirrors .divider-border.mt-5 */
  margin-top: 48px;
}
.gear-rail__title--compact {
  color: #181D27;
  font-family: 'SSTProBold', sans-serif;
  font-size: 24px;
  line-height: 32px;
  padding-top: 32px;
  padding-bottom: 16px;
  margin: 0;
}

@media (min-width: 992px) {
  .gear-rail__title--compact {
    font-size: 30px;
    line-height: 38px;
    padding-top: 40px;
    padding-bottom: 20px;
  }
}

.gear-rail--compact .gear-rail__intro {
  font-size: 16px;
  line-height: 24px;
  color: #535862;
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .gear-rail--compact .gear-rail__intro {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 18px;
  }
}

.gear-rail--compact .gear-rail__body { padding-top: 24px; }

/* ---- head layout: text + optional action photo ----
   With an action photo (>=992px): 2-column grid. Left column = heading/intro/course link (row 1)
   and the filter pills (row 2); the photo spans both rows, so its top aligns with the top of the
   headline and its bottom aligns with the bottom of the pills. Stacked below that. */
.gear-rail__head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.gear-rail__head-text { min-width: 0; }
.gear-rail__pills { min-width: 0; }

/* the section heading's top padding lives on the grid, so both columns start at the same line */
.gear-rail__head-grid { padding-top: 24px; }
.gear-rail--compact .gear-rail__head-grid { padding-top: 32px; }
@media (min-width: 992px) {
  .gear-rail--compact .gear-rail__head-grid { padding-top: 40px; }
}

.gear-rail__title--compact { padding-top: 0; }

/* Pill bar: academy.css bleeds .academy_catalog_item-categories-wrapper off the right edge below
   768px (negative margin, no right border / radius) because the course catalog has a long row of
   pills to scroll. The rail only ever has three, so keep it a closed, content-width bar at every
   size - same override academy.css makes for .academy-home-tabs-container. It still scrolls
   inside itself if three pills do not fit (320px phones). */
.gear-rail .academy_catalog_item-categories-wrapper { max-width: max-content; }
@media (max-width: 767.98px) {
  .gear-rail .academy_catalog_item-categories-wrapper {
    margin-right: 0;
    border-right: 1px solid #E9EAEB !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
}

/* Pill icons come from the site icon font (ico-sonycamera / ico-sonylense, the aperture glyph),
   matching the All pill's ico-sonyall. academy.css already colours .ico-sony inside these pills
   for the active/inactive states, so there is nothing to add here. */

/* ---- header extras ---- */
.gear-rail__course {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-family: 'SSTProBold', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #535862;
  text-decoration: none;
}
.gear-rail__course:hover { color: #F95C1C; text-decoration: none; }

/* ---- tile ---- */
.gear-card { height: 100%; }
.gear-card__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.gear-card__link:hover,
.gear-card__link:focus { color: inherit; text-decoration: none; }
.gear-card__link:focus-visible { outline: none; }
.gear-card__link:focus-visible .gear-card__img-wrapper { outline: 2px solid #F95C1C; outline-offset: 2px; }

.gear-card__img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #E9EAEB;
  background: #FFF;
  transition: box-shadow 0.2s ease;
}
a.gear-card__link:hover .gear-card__img-wrapper { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06); }
.gear-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gear-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}
.gear-card__type {
  font-family: 'SSTProBold', sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #717680;
}
.gear-card__title {
  font-family: 'SSTProBold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color:#181D27;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.gear-card__note {
  font-family: 'SSTProRoman', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color:#414651;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.gear-card__cta {
  margin-top: auto;
  align-self: stretch;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 20px;
}
.gear-card__cta-icon { font-size: 10px; }
@media (min-width: 576px) {
  .gear-card__cta { align-self: flex-start; min-height: 40px; }
}
.gear-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}