/* /galleries, album and carousel (Figma 295:7431, 612:6393, 826:52768). Tokens only (samf-tokens.css); logical properties; breakpoints 1728 / 1024 / 600. */
.samf-galleries {
  --_glass: rgba(0, 0, 0, .5);
  --_hairline: rgba(255, 255, 255, .35);
  --_hero-top: 155px;
  color: var(--samf-color-text); font-family: var(--samf-font-body); font-size: var(--samf-fs-body);
}
.samf-galleries-header {
  display: flex; align-items: flex-end; min-block-size: 370px;
  padding-block: var(--_hero-top) 80px;
  background: linear-gradient(to top, rgba(3, 3, 3, .8), rgba(27, 30, 4, 0));
}
.samf-galleries-header > .container { inline-size: 100%; max-inline-size: 1500px; padding-inline: 40px; }
.samf-galleries-title { font-family: var(--samf-font-display); font-size: 64px; line-height: 68px; letter-spacing: -.02em; font-weight: 500; margin: 0; }
.samf-galleries-header p { color: var(--samf-color-muted); max-inline-size: 60ch; margin: 12px 0 0; }
:lang(ar) .samf-galleries-title, :lang(ar) .samf-galleries-heading { letter-spacing: 0; text-transform: none; }
.samf-galleries-main { max-inline-size: 1500px; margin-inline: auto; padding: 80px 40px 80px; display: grid; gap: 40px; }
.samf-galleries-heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; font-family: var(--samf-font-display); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); line-height: 1.09; margin: 0; text-transform: uppercase; }
.samf-galleries-heading strong { font-weight: 600; color: var(--samf-color-performance); }
.samf-section-title { font-family: var(--samf-font-display); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); line-height: 1.09; margin: 0 0 24px; }
.samf-galleries .samf-gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.samf-gallery-filter { display: flex; flex-wrap: wrap; gap: 8px; background: var(--_glass); border-radius: 8px; padding: 8px; }
.samf-view-toggle { display: inline-flex; gap: 8px; }
.samf-galleries-back {
  display: inline-flex; align-items: center; gap: 12px; margin-inline-start: auto; min-block-size: 44px; padding-inline: 20px;
  background: var(--samf-color-primary); color: var(--samf-color-on-primary); border-radius: 8px; font-weight: 600; text-decoration: none;
}
.samf-galleries-back:hover { background: var(--samf-color-primary-hover); color: var(--samf-color-on-primary); }
[dir="rtl"] .samf-chev--sm { transform: scaleX(-1); }

/* pills and buttons: 44px touch targets */
.samf-galleries .samf-pill, .samf-toggle-btn, .samf-galleries .samf-btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding-inline: 12px; border-radius: 4px; font-size: var(--samf-fs-body); font-weight: 300; text-decoration: none; cursor: pointer; }
.samf-galleries .samf-pill { background: rgba(255, 255, 255, .15); color: var(--samf-color-text); border: 0; }
.samf-galleries .samf-pill:hover { background: var(--samf-color-surface); }
.samf-galleries .samf-pill--active { background: var(--samf-color-performance); color: var(--samf-color-on-primary); }
.samf-toggle-btn, .samf-galleries .samf-btn-outline { background: transparent; color: var(--samf-color-primary); border: 1px solid var(--samf-color-primary); }
.samf-toggle-btn:hover, .samf-galleries .samf-btn-outline:hover { background: var(--samf-color-surface); color: var(--samf-color-primary-hover); }
.samf-toggle-btn[aria-pressed="true"]:not(.samf-carousel__pause) { background: var(--samf-color-primary); color: var(--samf-color-on-primary); }
.samf-galleries .samf-btn-outline[aria-disabled="true"], .samf-toggle-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* grids: one bordered block, 4 columns, tiles share hairlines */
.samf-album-grid, .samf-gallery-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--_hairline); border-radius: 32px; overflow: hidden;
}
.samf-album-grid .samf-batch-item, .samf-gallery-grid .samf-batch-item { position: relative; min-inline-size: 0; }
.samf-album-grid .samf-batch-item::after, .samf-gallery-grid .samf-batch-item::after { content: ""; position: absolute; inset: 0; border: .5px solid var(--_hairline); pointer-events: none; z-index: 2; }
.samf-gallery-card { position: relative; display: block; block-size: 100%; background: var(--samf-color-surface-alt); overflow: hidden; }
.samf-gallery-card__cover { aspect-ratio: 355 / 201; object-fit: cover; inline-size: 100%; background: var(--samf-color-surface-alt); display: block; transition: transform .4s ease; }
.samf-gallery-card__cover--placeholder { background: var(--samf-color-services); }
.samf-gallery-card:hover .samf-gallery-card__cover { transform: scale(1.04); }
.samf-gallery-card__body {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; text-align: center;
  background: rgba(0, 194, 90, .55); opacity: 0; transition: opacity .25s ease;
}
.samf-gallery-card:hover .samf-gallery-card__body, .samf-gallery-card:focus-within .samf-gallery-card__body, .samf-gallery-card--featured .samf-gallery-card__body { opacity: 1; }
.samf-gallery-card__title { margin: 0; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 300; }
.samf-gallery-card__link { display: inline-block; padding: 6px 8px; max-inline-size: 200px; background: var(--samf-color-on-dark); color: var(--samf-color-on-primary); border-radius: 8px; text-decoration: none; }
.samf-gallery-card__link::after { content: ""; position: absolute; inset: 0; }
.samf-gallery-card__count { color: var(--samf-color-on-dark); font-size: var(--samf-fs-small); font-weight: 600; margin: 0; unicode-bidi: plaintext; }

.samf-gallery-grid__link { display: block; position: relative; }
.samf-gallery-grid__link::before {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 24px; block-size: 24px; margin: -12px 0 0 -12px; z-index: 1;
  border-radius: 24px; background: var(--samf-color-on-dark); opacity: 0; transition: opacity .25s ease;
}
[dir="rtl"] .samf-gallery-grid__link::before { margin: -12px -12px 0 0; }
.samf-gallery-grid__link:hover::before, .samf-gallery-grid__link:focus-visible::before { opacity: 1; }
.samf-gallery-grid__item { display: block; inline-size: 100%; aspect-ratio: 355 / 201; object-fit: cover; background: var(--samf-color-surface); }
video.samf-gallery-grid__item { background: var(--samf-color-surface-alt); }

/* carousel: 700px stage, green round arrows */
.samf-carousel { --_stage: min(700px, 70vh); position: relative; background: var(--samf-color-surface-alt); border: 1px solid var(--_hairline); border-radius: 32px; overflow: hidden; margin-block-end: 24px; }
.samf-carousel__stage { block-size: var(--_stage); }
.samf-carousel__slide { margin: 0; block-size: 100%; background: var(--samf-color-surface-alt); }
.samf-carousel__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.samf-carousel__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 20px; }
.samf-carousel__arrow {
  position: absolute; inset-block-start: calc(var(--_stage) / 2 - 31px); z-index: 2;
  inline-size: 62px; block-size: 62px; padding: 0; border-radius: 40px; border: 0;
  background: var(--samf-color-primary); color: var(--samf-color-on-primary);
}
.samf-carousel__arrow:hover, .samf-toggle-btn.samf-carousel__arrow:hover { background: var(--samf-color-primary-hover); color: var(--samf-color-on-primary); }
.samf-carousel__arrow--prev { inset-inline-start: 19px; }
.samf-carousel__arrow--next { inset-inline-end: 19px; }
[dir="rtl"] .samf-carousel__arrow .samf-chev { transform: scaleX(-1); }
.samf-carousel__count { margin-inline-start: auto; color: var(--samf-color-muted); unicode-bidi: plaintext; direction: ltr; }
.samf-carousel__pause[aria-pressed="true"] { background: transparent; }
.samf-carousel__pause[aria-pressed="false"] { background: var(--samf-color-primary); color: var(--samf-color-on-primary); }
.samf-carousel[hidden], [data-view-panel][hidden], [data-samf-more-wrap][hidden], [data-samf-view-toggle][hidden], .samf-carousel__slide[hidden] { display: none !important; }

/* load more, pagination, other albums */
.samf-more, .samf-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding-block: 24px; }
.samf-more .samf-btn-outline { border: 0; color: var(--samf-color-performance); font-weight: 600; }
.samf-js .samf-pagination { display: none; }
.samf-other-albums { padding-block-start: 24px; }

/* empty state (own design, no Figma frame) */
.samf-empty-state { display: grid; justify-items: center; gap: .75rem; text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; background: var(--_glass); border: 1px dashed var(--samf-color-border-strong); border-radius: 32px; }
.samf-empty-state__icon { color: var(--samf-color-primary); }
.samf-empty-state__title { font-family: var(--samf-font-display); font-size: var(--samf-fs-h4); margin: 0; }
.samf-empty-state__text { color: var(--samf-color-muted); max-inline-size: 48ch; margin: 0; }

/* focus */
.samf-galleries :is(a, button):focus-visible, .samf-carousel:focus-visible, .samf-batch-item:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }

@media (max-width: 1024px) {
  .samf-album-grid, .samf-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .samf-galleries-main, .samf-galleries-header > .container { padding-inline: 24px; }
  .samf-galleries-title { font-size: 48px; line-height: 52px; }
  .samf-carousel { --_stage: min(520px, 60vh); }
}
@media (max-width: 600px) {
  .samf-galleries { --_hero-top: 110px; }
  .samf-galleries-header { min-block-size: 240px; padding-block-end: 40px; }
  .samf-galleries-title { font-size: 36px; line-height: 40px; }
  .samf-galleries-main, .samf-galleries-header > .container { padding-inline: 16px; }
  .samf-galleries-main { padding-block-start: 40px; }
  .samf-album-grid, .samf-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }
  .samf-galleries-back { margin-inline-start: 0; }
  .samf-carousel { --_stage: 320px; border-radius: 24px; }
  .samf-carousel__arrow { inline-size: 44px; block-size: 44px; inset-block-start: calc(var(--_stage) / 2 - 22px); }
  .samf-carousel__arrow--prev { inset-inline-start: 8px; }
  .samf-carousel__arrow--next { inset-inline-end: 8px; }
  .samf-gallery-card__body { opacity: 1; background: linear-gradient(to top, rgba(3, 3, 3, .8), rgba(3, 3, 3, 0) 60%); place-content: end center; }
  .samf-gallery-card__link { background: transparent; color: var(--samf-color-on-dark); padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .samf-galleries * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 375px) {
  .samf-galleries img, .samf-gallery-carousel__image { max-inline-size: 100%; }
  .samf-carousel__bar { flex-wrap: wrap; }
}

/* ---- exact Figma values (N2): 29LT Bukra VF family (Cairo fallback until the files arrive); sizes at >=1025px, 44px touch targets below ---- */
.samf-galleries { --_f: var(--samf-font-display); font-family: var(--_f); position: relative; }
.samf-galleries__crumb { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; }
.samf-galleries-title { font-family: var(--_f); }
.samf-galleries-main { padding-block: 80px; gap: 40px; }
.samf-galleries-heading { display: block; font-family: var(--_f); font-weight: 300; font-size: 46px; line-height: 50px; letter-spacing: 0; color: var(--samf-color-text); }
.samf-galleries-heading strong { font-weight: 600; color: var(--samf-color-performance); }
.samf-galleries .samf-gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.samf-galleries-heading--album { flex: 1 1 auto; }
.samf-gallery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.samf-gallery-filter { gap: 8px; padding: 8px; border-radius: 8px; background: var(--_glass); }
.samf-galleries .samf-pill { font-family: var(--_f); font-size: 14px; line-height: 20px; font-weight: 400; padding: 7px 12px; border-radius: 4px; background: rgba(255, 255, 255, .15); color: var(--samf-color-text); }
.samf-galleries .samf-pill.samf-pill--active { background: var(--samf-color-performance); color: var(--samf-color-text); }
.samf-galleries .samf-pill--icon { gap: 8px; }
.samf-galleries .samf-pill--icon svg { inline-size: 18px; block-size: 18px; }
.samf-galleries-back { gap: 12px; padding: 15px 20px; font-family: var(--_f); font-size: 14px; line-height: 20px; font-weight: 600; margin-inline-start: 0; border-radius: 8px; }

/* mosaic: 4 x 3 cells of 1px gap, 1px hairline border, radius 32 */
.samf-album-grid, .samf-gallery-grid { gap: 1px; background: var(--_hairline); border: 1px solid var(--_hairline); border-radius: 32px; overflow: hidden; }
.samf-album-grid .samf-batch-item::after, .samf-gallery-grid .samf-batch-item::after { display: none; }
.samf-gallery-card, .samf-gallery-grid__link { background: var(--samf-color-surface-alt); }
.samf-gallery-card__body { background: var(--samf-color-performance); mix-blend-mode: color; opacity: 0; }
.samf-gallery-card:hover .samf-gallery-card__body, .samf-gallery-card:focus-within .samf-gallery-card__body, .samf-gallery-card--featured .samf-gallery-card__body { opacity: 1; }
/* Featured tile: green tint without blend so the album label stays readable (mix-blend-mode: color erased the text). */
.samf-gallery-card--featured .samf-gallery-card__body { mix-blend-mode: normal; background: color-mix(in srgb, var(--samf-color-performance) 60%, transparent); }
.samf-gallery-card--featured .samf-gallery-card__link { color: var(--samf-palette-charcoal); }
.samf-gallery-card__link { position: relative; z-index: 3; padding: 6px 8px; border-radius: 8px; background: var(--samf-color-on-dark); color: var(--samf-color-on-primary); max-inline-size: 200px; font-family: var(--_f); font-size: 14px; line-height: 20px; font-weight: 300; }
.samf-gallery-card__title { font-size: 14px; line-height: 20px; font-weight: 300; }
.samf-more--cell { display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); min-block-size: 201px; }
.samf-more--cell[hidden] { display: none !important; }
.samf-more--cell .samf-btn-outline { padding: 0; background: transparent; border: 0; color: var(--samf-color-performance); font-family: var(--_f); font-size: 14px; line-height: 20px; font-weight: 600; }

/* carousel frame (826:52770): 1420x700 stage, 62px arrows 19px from the edges, 10px dots 40px below */
.samf-carousel { background: transparent; border: 0; border-radius: 0; overflow: visible; margin-block-end: 0; }
.samf-carousel__frame { position: relative; border: 1px solid var(--_hairline); border-radius: 32px; overflow: hidden; background: var(--samf-color-surface-alt); }
.samf-carousel__arrow { inset-block-start: calc(var(--_stage) / 2 - 31px); }
.samf-carousel__bar { justify-content: center; position: relative; gap: 16px; padding: 40px 0 0; }
.samf-carousel__dots { display: flex; align-items: center; gap: 16px; }
.samf-carousel__dot { position: relative; inline-size: 10px; block-size: 10px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .35); cursor: pointer; }
.samf-carousel__dot::before { content: ""; position: absolute; inset: -17px; }
.samf-carousel__dot[aria-current="true"] { background: var(--samf-color-primary); }
.samf-carousel__bar .samf-carousel__pause, .samf-carousel__bar .samf-carousel__count { position: absolute; inset-block-start: 40px; }
.samf-carousel__bar .samf-carousel__pause { inset-inline-start: 0; }
.samf-carousel__bar .samf-carousel__count { inset-inline-end: 0; margin: 0; }
/* 1105: the count is forced direction:ltr, so its logical inset resolves to the right; in RTL pin it to the left, clear of the pause button */
:root[dir="rtl"] .samf-carousel__bar .samf-carousel__count, [dir="rtl"] .samf-carousel__bar .samf-carousel__count { inset-inline-end: auto; inset-inline-start: 0; }

@media (min-width: 1025px) {
  .samf-galleries .samf-pill, .samf-galleries .samf-btn, .samf-galleries-back { min-block-size: 0; }
  .samf-galleries .samf-pill--icon { min-block-size: 32px; }
}
@media (max-width: 1024px) {
  .samf-galleries-heading { font-size: 36px; line-height: 40px; }
  .samf-gallery-actions { gap: 12px; }
}
@media (max-width: 375px) {
  .samf-galleries-heading { font-size: 28px; line-height: 32px; }
  .samf-carousel__bar .samf-carousel__pause, .samf-carousel__bar .samf-carousel__count { position: static; }
}

/* 1105: empty trailing grid cells showed the grey hairline background; use a dark glass fill and draw hairlines per cell instead (Figma: dark cell) */
.samf-album-grid, .samf-gallery-grid { gap: 0; background: rgba(0, 0, 0, .5); }
.samf-album-grid .samf-batch-item::after, .samf-gallery-grid .samf-batch-item::after { display: block; }
.samf-gallery-grid > .samf-more--cell { border-inline-start: .5px solid var(--_hairline); border-block-start: .5px solid var(--_hairline); }
/* 1105: Figma album title is mixed case ("Dakar Rally 2025"); only the list heading "Moments in motion" is uppercase */
.samf-galleries-heading--album { text-transform: none; }
/* 1105: Figma mobile (832:12170, 832:12655) is one column */
@media (max-width: 600px) { .samf-album-grid, .samf-gallery-grid { grid-template-columns: minmax(0, 1fr); } .samf-gallery-card__cover, .samf-gallery-grid__item { aspect-ratio: 343 / 168; } }

/* 1105: Figma 612:6393 - with no filter the photo pill reads as the active one, and the hover marker is an eye icon */
.samf-gallery-filter:not(:has(.samf-pill--active)) > .samf-pill--icon:first-child { background: var(--samf-color-performance); color: var(--samf-color-text); }
.samf-gallery-grid__link::before {
  background: var(--samf-color-on-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23010101' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* 1105: Figma gallery-grid mobile (832:12655) keeps 2 columns of the 355:201 tiles; only the albums list (832:12170) is one column */
@media (max-width: 600px) {
  .samf-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samf-gallery-grid .samf-gallery-grid__item { aspect-ratio: 355 / 201; }
}

/* ---------- visual-fix-1108 (G4): galleries measured against Figma 295:7431 / 612:6393 / 826:52768 and the mobile frames ---------- */
/* Page header: the Figma pill header floats OVER the 370px page header (title bottom at y=290); here the header is sticky and in the flow, so the page started
   125px (100px below 1400) too low. The page header pulls up by the header's own height (see samf-news.css, same fix). */
.samf-galleries { display: flow-root; --_header-h: 100px; }
@media (min-width: 1400px) { .samf-galleries { --_header-h: 125px; } }
.samf-galleries-header { margin-block-start: calc(-1 * var(--_header-h)); }
/* Figma gradient: darkest (0.8) at the top under the header, transparent at the title (dark theme only; the light theme keeps its own) */
html:not([data-theme="light"]) .samf-galleries-header { background: linear-gradient(to bottom, rgba(3, 3, 3, .8), rgba(27, 30, 4, 0)); }
/* Mobile Figma: page header 230px (title 32/36 on the bottom edge), 20px page padding */
@media (max-width: 600px) {
  .samf-galleries { --_hero-top: 120px; }
  .samf-galleries-header { min-block-size: 230px; padding-block-end: 0; }
  .samf-galleries-title { font-size: 32px; line-height: 36px; }
  .samf-galleries-main, .samf-galleries-header > .container { padding-inline: 20px; }
}
/* On the album page the page title is a <p>, which `.samf-galleries-header p` painted muted grey with a 12px top margin and a 60ch cap; Figma 612:6393 shows it white like the h1 on the list page */
.samf-galleries-header p.samf-galleries-title { color: var(--samf-color-text); margin: 0; max-inline-size: none; }
/* Mobile Figma 832:12170 / 832:12655: 40px under the page header, 24px between heading / toolbar / grid, heading 24/28, grid radius 16 */
@media (max-width: 600px) {
  .samf-galleries-main { gap: 24px; }
  .samf-galleries-heading { font-size: 24px; line-height: 28px; }
  .samf-album-grid, .samf-gallery-grid { border-radius: 16px; }
}