/* ============================================================
   FLAIR — Storefront pattern styles
   The small typographic, media and layout helpers the ecommerce
   homepage patterns (patterns/store-*.php, category "Flair:
   Storefront") are built from, scoped entirely to .flair-sf-*
   classes so nothing here touches a block that doesn't opt in.

   Deliberately NO button styling: every button in these patterns
   uses the active theme's own button styles (the default button,
   is-style-ghost, is-style-white-pill, is-style-ghost-on-dark), so
   how a button looks stays a style/variant decision made in the
   theme, not something this plugin overrides.

   Loaded everywhere (inc/assets.php, flair_companion_blocks_style()),
   front end and editor alike, same as blocks.css: a pattern's blocks
   can end up inside any page or template.

   Colors and fonts read this plugin's own Brand Kit custom properties
   (flair-companion-color-*, flair-companion-font-*, added as an
   inline <style> block ahead of blocks.css — inc/brand-kit.php), each
   with a literal fallback matching flair_companion_brand_kit_defaults(),
   so these patterns look intentional under any theme. Spacing and
   font-size deliberately still read whichever THEME is active
   (--wp--preset--spacing/font-size--*), same reasoning as blocks.css.
   ============================================================ */

/* ---- Typography helpers ---- */
.flair-sf-eyebrow{
  margin:0 0 var(--wp--preset--spacing--sm,1rem);
  font-family:var(--flair-companion-font-headings,'Bricolage Grotesque',sans-serif);
  font-size:var(--wp--preset--font-size--small,.875rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.flair-sf-quote{
  margin:0 0 var(--wp--preset--spacing--md,1.25rem);
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);line-height:1.35;
}
.flair-sf-caption{
  margin:var(--wp--preset--spacing--xs,.75rem) 0 0;
  font-size:var(--wp--preset--font-size--small,.875rem);letter-spacing:.08em;text-transform:uppercase;
}
.flair-sf-caption a{color:inherit;text-decoration:none}
.flair-sf-caption a:hover{text-decoration:underline}

/* ---- Media: a tinted, evenly-cropped image frame. Ratio modifiers set
   the crop; the default is a portrait 4:5 like a product editorial. ---- */
.flair-sf-media{margin:0;background:var(--flair-companion-color-background-alt,#fff)}
.flair-sf-media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.flair-sf-media-square img{aspect-ratio:1/1}
.flair-sf-media-wide img{aspect-ratio:3/2}

/* ---- Product cards (static "featured products" row) ---- */
.flair-sf-product-name{
  margin:var(--wp--preset--spacing--xs,.75rem) 0 0;
  font-size:var(--wp--preset--font-size--small,.875rem);font-weight:600;line-height:1.3;
}
.flair-sf-price{
  margin:.15rem 0 var(--wp--preset--spacing--sm,1rem);
  font-size:var(--wp--preset--font-size--small,.875rem);color:var(--flair-companion-color-muted,#6A6580);
}

/* ---- Numbered claims (dark explainer) ---- */
.flair-sf-number{
  flex:0 0 3.5rem;margin:0;
  font-family:var(--flair-companion-font-headings,'Bricolage Grotesque',sans-serif);
  font-size:clamp(3rem,2.2rem + 4vw,4.5rem);font-weight:800;line-height:.9;
}

/* ---- Press & awards ---- */
.flair-sf-press-source{
  margin:0 0 var(--wp--preset--spacing--xs,.5rem);
  font-size:var(--wp--preset--font-size--small,.875rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flair-companion-color-muted,#6A6580);
}

/* ---- Service promises / perks: an icon over a short heading and line,
   set between two hairlines. The dashicon is decoration only. ---- */
.flair-sf-promises{
  border-top:1px solid var(--flair-companion-color-border,#E4E6F0);
  border-bottom:1px solid var(--flair-companion-color-border,#E4E6F0);
}
.flair-sf-promises-dark{border-color:rgba(255,255,255,.2)}
.flair-sf-promise{text-align:center}
.flair-sf-promise .dashicons{display:block;margin:0 auto var(--wp--preset--spacing--xs,.75rem);width:2rem;height:2rem;font-size:2rem}
.flair-sf-promise-title{
  margin:0 0 .25rem;
  font-family:var(--flair-companion-font-headings,'Bricolage Grotesque',sans-serif);
  font-size:var(--wp--preset--font-size--small,.875rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.flair-sf-promise-text{margin:0;font-size:var(--wp--preset--font-size--small,.875rem);opacity:.8}

/* ---- Journal cards (latest posts) ---- */
.flair-sf-journal .wp-block-post-title{margin:.25rem 0 .5rem;line-height:1.25}
.flair-sf-journal .wp-block-post-title a{color:inherit;text-decoration:none}
.flair-sf-journal .wp-block-post-title a:hover{text-decoration:underline}
.flair-sf-journal .wp-block-post-terms{
  font-size:var(--wp--preset--font-size--small,.875rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flair-companion-color-muted,#6A6580);
}
.flair-sf-journal .wp-block-post-terms a{color:inherit;text-decoration:none}
.flair-sf-journal .wp-block-post-excerpt{font-size:var(--wp--preset--font-size--small,.875rem)}

/* ---- Newsletter form: layout only (one row, field stretches). Field and
   button looks come from the theme. No form plugin is wired up — the form
   is real input markup that doesn't submit anywhere until pointed at an
   email tool. ---- */
.flair-sf-newsletter{display:flex;flex-wrap:wrap;gap:.75rem;max-width:32rem;margin:0 auto}
.flair-sf-newsletter input[type="email"]{flex:1 1 12rem;min-width:0}
.flair-sf-newsletter button{flex:0 0 auto}