/* store-about.css — "За нас" page.
 * Loaded only for the 'about' info page (see index.php's
 * store_handle_info_page()), alongside store-home-fonts.css +
 * store-home.css for the shared coffee/martines color tokens and the
 * already-built .store-home-shell/-eyebrow/-divider/.store-btn-primary/
 * -outline classes this page reuses rather than redefining. No new
 * colors, no new fonts -- only this page's own layout lives here.
 * Built compact/editorial on purpose, matching the reference's own
 * density: small type scale, modest image heights, tight section gaps,
 * no card shadows/large radii.
 */

.store-about { color: var(--martines-text); background: var(--martines-bg); overflow-x: clip; }
/* 2026-10-06: kills the shared .store-footer's global margin-top:2rem
   (store-header.css) right before it on THIS page only -- that margin
   sits outside .store-about's own box, over the raw white <body>
   background (this page's own cream only covers .store-about itself),
   so it read as an unwanted white gap between the team section and the
   dark footer. Scoped to .store-about's own next sibling, not a change
   to the shared rule (every other page still gets its normal gap). */
.store-about + .store-footer { margin-top: 0; }
.store-about h2 { margin: 0 0 8px; color: var(--martines-green); font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; }
.store-about p { margin: 0; color: var(--martines-muted); font-size: 13px; line-height: 1.6; }

/* ---- Hero ----
   Fluid exactly like the homepage's own .store-home-hero: the copy
   column is a real-flow box with a capped max-width (text never
   balloons on a big monitor), the media column is absolutely
   positioned with NO cap (right:0) so it keeps growing with the
   viewport -- same technique, same reason, as store-home.css's own
   .store-home-hero-media (explicitly "NOT capped ... stays full-bleed"
   there). Not wrapped in .store-home-shell on purpose -- that would cap
   the image at the shell's own max-width, which is exactly what this is
   avoiding. The copy's own left offset approximates the shell's real
   left edge via max(), so headings/body text still line up with every
   section below at any viewport width. */
/* #fafaf8: explicit hero-only background color (a touch lighter/warmer
   than the page's default --martines-bg cream), per direct instruction. */
/* Soft fade into the page's own cream at the very bottom instead of a
   flat fill -- #fafaf8 is warm enough that a hard edge against the
   page's default --martines-bg just below read as a visible seam/line. */
.store-about-hero { position: relative; overflow: hidden; min-height: 520px; padding-top: 0; padding-bottom: 0; background: linear-gradient(180deg, #fafaf8 0%, #fafaf8 88%, var(--martines-bg) 100%); }
.store-about-hero-inner {
  position: relative; min-height: 520px; display: flex;
  padding-left: max(24px, calc((100vw - 1280px) / 2));
}
.store-about-hero-copy {
  position: relative; z-index: 2; width: 44%; max-width: 480px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 24px 32px 0;
}
.store-about-hero-title { margin: 6px 0 0; font-family: var(--font-display); color: var(--martines-green); font-weight: 600; line-height: 1.12; }
.store-about-hero-title span { display: block; font-size: 28px; text-transform: uppercase; letter-spacing: .01em; }
.store-about-hero-rule { width: 48px; height: 3px; background: var(--coffee-caramel); margin: 14px 0 16px; border-radius: 2px; }
.store-about-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--martines-muted); max-width: 44ch; }
/* 2026-10-06: tightened a little, per explicit instruction -- same
   scoped-down padding/font-size treatment as the homepage hero's own
   primary CTA (.store-home-hero-actions .store-btn-primary), not a
   change to the shared .store-btn-primary class itself (also used
   elsewhere on this page/site at its normal size).
   align-self:flex-start is the real fix for the button LOOKING
   oversized in the first place: .store-about-hero-copy is a flex
   column with no align-items override (default stretch), which was
   stretching this lone <a> to the column's full width -- the homepage
   hero never hit this because its CTAs sit inside their own row flex
   wrapper (.store-home-hero-actions), where stretch only affects
   height, not width. */
.store-about-hero-cta { margin-top: 6px; padding-inline: 14px; font-size: 10px; align-self: flex-start; }
/* Left edge pulled inward of the nominal column split (same technique as
   store-home.css's own .store-home-hero-media: a real px shift via
   calc(), not just a smaller %) so the image starts underneath the
   text-adjacent zone, giving the fade below real width to work with
   before the photo reaches full contrast. */
.store-about-hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: calc(30% - 40px); overflow: hidden; }
.store-about-hero-media picture { display: block; width: 100%; height: 100%; }
.store-about-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Same cream-to-transparent "mist" fade as the homepage's own hero
   (store-home.css's .store-home-hero-media::before), but pulled in
   toward the left edge and narrowed -- per explicit instruction, this
   page's own photo has people standing across nearly the full width,
   and the homepage's own reach (fading out as late as 56-78% of the
   box) covered half of them. Same recipe/colors, smaller ellipses and
   earlier fade-out stops only. */
.store-about-hero-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 62% at 4% 28%, #fafaf8 0%, rgba(250,250,248,.96) 24%, rgba(250,250,248,.68) 44%, rgba(250,250,248,.18) 64%, rgba(250,250,248,0) 78%),
    radial-gradient(ellipse 19% 72% at 8% 78%, rgba(250,250,248,.94) 0%, rgba(250,250,248,.70) 30%, rgba(250,250,248,.24) 55%, rgba(250,250,248,0) 74%),
    radial-gradient(ellipse 14% 48% at 13% 42%, rgba(250,250,248,.44) 0%, rgba(250,250,248,.20) 42%, rgba(250,250,248,0) 68%),
    linear-gradient(90deg, #fafaf8 0%, rgba(250,250,248,.98) 6%, rgba(250,250,248,.82) 12%, rgba(250,250,248,.50) 18%, rgba(250,250,248,.16) 23%, rgba(250,250,248,0) 28%);
}
/* Slight dark-brown wash across the WHOLE hero (cream text area + photo
   alike), not just the photo -- per explicit instruction/correction
   ("добре го беше направил, върни го... сложи същия цвят но по цялото
   херо"). Same --coffee-roasted token, same .14 multiply opacity as the
   photo-only version this replaces; sits on .store-about-hero-inner
   (z-index:1, between the photo's own z-index:auto and the copy
   column's z-index:2) so it tints the cream background AND the photo
   underneath it, while the text on top stays untouched/fully legible. */
.store-about-hero-inner::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--coffee-roasted); opacity: .14; mix-blend-mode: multiply;
}

/* ---- Info grid: two 4-column rows, image/text/text/image then
   text/image/text/image -- pure editorial grid, no card chrome. ---- */
/* 2026-10-06: padding-top 32px -> 75px, per explicit instruction to
   match the homepage's own hero-to-next-section gap exactly (measured
   live: homepage's hero bottom to its "Избрано за теб" heading is
   ~75px, built from .store-home-section's 32px + .store-home-coffee-
   rail's own 28px padding + ~15px of grid align-items:center
   centering -- here it's just one padding value since this section has
   no such nested/centered layout). padding-bottom untouched. */
.store-about-info { padding-top: 75px; padding-bottom: 32px; }
.store-about-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; row-gap: 32px; align-items: start; }
.store-about-info-img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius-sm, 8px); display: block; }
.store-about-info-copy p { margin-top: 6px; }

/* ---- 7 values in one row, thin vertical separators ---- */
/* 2026-10-06: padding-top/bottom now match .store-about-info's own
   75px/32px exactly, per explicit instruction to use this same rhythm
   between every section on the page, not just hero->info. */
.store-about-values { padding-top: 75px; padding-bottom: 32px; }
.store-about-values-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.store-about-value { padding: 0 14px; border-left: 1px solid var(--martines-border); text-align: left; }
.store-about-value:first-child { border-left: none; padding-left: 0; }
.store-about-value-icon { display: block; color: var(--coffee-caramel); margin-bottom: 8px; }
.store-about-value-title { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--martines-text); margin-bottom: 4px; }
.store-about-value-desc { font-size: 11.5px; color: var(--martines-muted); line-height: 1.4; }

/* ---- Adventure: copy + 3-photo row ---- */
.store-about-adventure { padding-top: 75px; padding-bottom: 32px; }
.store-about-adventure-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; align-items: center; }
.store-about-adventure-copy h2 { max-width: 16ch; }
.store-about-adventure-bold { margin-top: 10px; font-weight: 700; color: var(--martines-text); }
.store-about-adventure-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.store-about-adventure-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm, 8px); }

/* ---- Catalog: 6 cards in one row ---- */
.store-about-catalog { padding-top: 75px; padding-bottom: 32px; }
.store-about-catalog-heading { text-align: left; margin-bottom: 18px; }
.store-about-catalog-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
/* 2026-10-06: one outer border per card (padding:12px + 1px solid
   #d9d9d9), per explicit instruction to match the homepage's own
   equipment card (.store-home-equipment-card, "Подбрано за
   професионалисти") -- same border color/width/padding, same single
   border wrapping image+name+CTA together. The image's own former
   individual border/radius/bg is removed (equipment's image sits flush
   inside its card with no separate frame -- the one outer border is the
   whole card's only border now). */
.store-about-catalog-card { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--martines-text); padding: 12px; border: 1px solid #d9d9d9; }
.store-about-catalog-card-img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.store-about-catalog-card-img img { max-width: 72%; max-height: 72%; object-fit: contain; }
.store-about-catalog-card-name { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; text-align: center; }
.store-about-catalog-card-cta { width: 100%; height: 28px; font-size: 9.5px; }

/* ---- Vision/mission banners ---- */
.store-about-banners { padding-top: 75px; padding-bottom: 32px; }
.store-about-banners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.store-about-banner { padding: 26px 28px; border-radius: var(--radius-sm, 8px); }
.store-about-banner-icon { display: block; margin-bottom: 10px; }
.store-about-banner h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.store-about-banner p { font-size: 12.5px; line-height: 1.6; }
.store-about-banner-dark { background: var(--coffee-plantation); color: #fff; }
.store-about-banner-dark h3, .store-about-banner-dark .store-about-banner-icon { color: #fff; }
.store-about-banner-dark p { color: rgba(255, 255, 255, .82); }
.store-about-banner-light { background: var(--color-surface, #fff); border: 1px solid var(--martines-border); }
.store-about-banner-light .store-about-banner-icon { color: var(--coffee-caramel); }

/* ---- Team: centered heading, circular portraits in a row, no cards ---- */
.store-about-team { padding-top: 75px; padding-bottom: 32px; }
.store-about-team-heading { text-align: center; margin-bottom: 26px; }
.store-about-team-heading h2 { font-size: 20px; }
.store-about-team-heading p { max-width: 56ch; margin: 0 auto; }
.store-about-team-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px 24px; }
.store-about-team-member { display: flex; flex-direction: column; align-items: center; text-align: center; width: 140px; }
.store-about-team-portrait { display: block; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; }
.store-about-team-img { width: 100%; height: 100%; object-fit: cover; }
.store-about-team-name { font-weight: 700; font-size: 12.5px; color: var(--martines-text); }
.store-about-team-role { font-size: 11px; color: var(--martines-muted); margin-top: 1px; }

/* ---- Fluid wide-desktop widening, matching store-home.css's own
   identical >=1600px rule for its editorial sections (coffee rail,
   specialty, equipment, origin) exactly -- same breakpoint, same
   1680px cap, applied here to every .store-home-shell this page uses
   (not just a handful of sections), since the whole page should widen
   together rather than independently. The hero is handled separately
   above (uncapped on purpose). */
@media (min-width: 1600px) {
  .store-about .store-home-shell { width: min(100% - 16px, 1680px); }
  /* Keeps the hero copy's own left edge lined up with the shell's real
     left edge above this same breakpoint -- the shell jumps from a
     1280px to a 1680px cap here, so the hero's own gutter formula must
     jump the same way or the two drift apart on a wide monitor. */
  .store-about-hero-inner { padding-left: max(24px, calc((100vw - 1680px) / 2)); }
  /* 2026-10-06: same wide-desktop text bump as the homepage hero's own
     >=1600px block (store-home.css's ".store-home-hero h1"/"-desc"
     rules) -- per explicit instruction, every hero should get this
     going forward. .store-about-hero's eyebrow already reuses the
     shared .store-home-eyebrow class, so it's covered by store-home.css's
     own 1600px rule for free; only this page's own title/lead classes
     need their own entries here. Same proportions as the homepage pair
     (h1 40->44px, desc 14->15px). */
  .store-about-hero-title span { font-size: 31px; }
  .store-about-lead { font-size: 14.5px; }
}

/* ---- Tablet ---- */
@media (max-width: 899.98px) {
  .store-about-hero { min-height: 0; }
  .store-about-hero-inner { position: static; display: block; min-height: 0; }
  .store-about-hero-copy { position: static; width: auto; max-width: none; padding: 28px 20px 20px; }
  .store-about-hero-media { position: static; width: auto; height: 260px; }
  .store-about-hero-media::before { background: none; }
  .store-about-info-grid { grid-template-columns: repeat(2, 1fr); }
  .store-about-values-row { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
  .store-about-value { border-left: none; padding: 0; }
  .store-about-adventure-grid { grid-template-columns: 1fr; gap: 20px; }
  .store-about-adventure-copy h2 { max-width: none; }
  .store-about-catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .store-about-banners-grid { grid-template-columns: 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 575.98px) {
  .store-about section { padding: 28px 0; }
  .store-about-hero-title span { font-size: 22px; }
  .store-about-info-grid { grid-template-columns: 1fr; row-gap: 20px; }
  .store-about-values-row { grid-template-columns: repeat(2, 1fr); }
  .store-about-adventure-photos { grid-template-columns: 1fr; }
  .store-about-catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .store-about-team-member { width: 110px; }
}