/* Superflies v2 — 30-home.css (plan.md §8; design: index.html, m-home.html) */

.home .sf-page{padding-top:0}
.sf-home__hero{padding-top:24px}

/* ---- hero ---- */
.sf-hero{background:var(--sf-white);border-radius:var(--sf-r-12);overflow:hidden;display:grid;grid-template-columns:1fr 460px;min-height:400px;position:relative;border:1px solid var(--sf-border)} /* min-height, not height: the ACF copy (3 USPs) must never overflow the panel */
.sf-hero__media{position:relative;background:#c9d3dc;min-height:0}
.sf-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* fills the media cell whatever height the text panel needs */
.sf-hero__label{position:absolute;top:12px;left:12px;background:var(--sf-orange);color:var(--sf-white);font-size:11px;font-weight:600;padding:4px 9px;border-radius:var(--sf-r-pill)}
.sf-hero__panel{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
.sf-hero__title{margin:0;font-size:38px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.sf-hero__sub{margin:0;font-size:15px;line-height:1.55;color:var(--sf-text-2)}
.sf-hero__cta{display:flex;gap:10px;margin-top:4px}
.sf-hero__usps{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:13px;line-height:1.45;color:var(--sf-text-2);margin-top:10px;border-top:1px solid var(--sf-border-4);padding-top:16px}
.sf-hero__usps>span:nth-child(3):last-child{grid-column:1/-1} /* a third USP takes the full width instead of an orphan cell */
.sf-hero__usps b{color:var(--sf-ink);font-weight:700}
.sf-hero__usps p{margin:0;display:inline}
.sf-hero__proof{display:none;justify-content:space-between;gap:10px;font-size:12px;color:var(--sf-text-2)}

/* ---- species tiles ---- */
.sf-tile{display:block;background:var(--sf-white);border:1px solid var(--sf-border);border-radius:var(--sf-r-10);overflow:hidden;color:var(--sf-ink);text-decoration:none;transition:border-color .12s}
.sf-tile:hover{border-color:var(--sf-navy);text-decoration:none;color:var(--sf-ink)}
.sf-tile__media{aspect-ratio:1;background:#dde3ea;overflow:hidden}
.sf-tile__media img{width:100%;height:100%;object-fit:cover;display:block}
.sf-tile__placeholder{display:block;width:100%;height:100%;background:repeating-linear-gradient(135deg,#dde3ea 0 10px,#d2d9e1 10px 20px)}
.sf-tile__body{padding:12px 14px}
.sf-tile__name{font-size:15px;font-weight:600;line-height:1.3}
.sf-tile__count{font-size:12px;color:var(--sf-muted);margin-top:2px}

/* ---- product grids ---- */
.sf-home__product_grid .sf-section__head{flex-wrap:wrap}
.sf-section__foot{display:flex;justify-content:flex-end;margin-top:14px}
.sf-section__more-wrap .sf-section__more{font-size:13px}

/* ---- why card ---- */
.sf-why{display:grid;grid-template-columns:300px 1fr;gap:48px;padding:40px 48px;background:var(--sf-white);border:1px solid var(--sf-border);border-radius:var(--sf-r-12)}
.sf-why__side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sf-why__eyebrow{color:var(--sf-link);letter-spacing:.1em}
.sf-why__title{margin:0;font-size:28px;line-height:1.15;font-weight:700}
.sf-why__btn{margin-top:8px;font-size:14px;padding:12px 18px}
.sf-why__content{font-size:15px;line-height:1.65;color:var(--sf-text);columns:2;column-gap:32px}
.sf-why__content p{margin:0 0 14px;break-inside:avoid}
.sf-why__content p:last-child{margin-bottom:0}
.sf-why__content a{color:var(--sf-link)}
.sf-why__content h3,.sf-why__content h4{font-size:16px;margin:0 0 8px}
.sf-why__content img{display:none}

/* ---- journal (news cards, shared with blog — §15.1) ---- */
.sf-home__news_section{padding-bottom:12px}

/* ---- mobile (m-home.html) ---- */
@media (max-width:767px){
  .sf-home__hero{padding-top:4px}
  .sf-hero{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;min-height:0}
  .sf-hero__media{height:auto;aspect-ratio:3/2;align-self:start;background:var(--sf-white)} /* box height pinned by ratio, not by the img (WebKit can size an auto-height img taller than its picture inside a grid track) */
  .sf-hero__img{position:static;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:50% 50%} /* whole photo visible (client request) */
  .sf-hero__panel{padding:18px;gap:10px}
  .sf-hero__title{font-size:24px;line-height:1.15}
  .sf-hero__sub,.sf-hero__usps{display:none}
  .sf-hero__cta{margin:0}
  .sf-hero__proof{display:flex}
  .sf-hero__cta .sf-btn{width:100%;padding:14px;font-size:15px}
  .sf-hero__label{top:10px;left:10px}
  .sf-tile__body{padding:8px 10px}
  .sf-tile__name{font-size:13px}
  .sf-tile__count{font-size:11px}
  .sf-section__foot{margin-top:10px}
  .sf-why{grid-template-columns:1fr;gap:16px;padding:24px 20px}
  .sf-why__title{font-size:22px}
  .sf-why__content{columns:1}
}
@media (min-width:768px) and (max-width:991px){
  .sf-hero{grid-template-columns:1fr 380px;min-height:340px}
  .sf-hero__panel{padding:28px}
  .sf-hero__title{font-size:30px}
  .sf-why{grid-template-columns:240px 1fr;gap:28px;padding:28px}
}