/* Kommersiella innehållstyper (jobb, utbildningar, leverantörer,
   branschlänkar, erbjudanden, poddar) - §2 "Egna mallar per
   innehållstyp", se /tmp/gamla-temat-funktionalitet.md punkt 2. Delar
   typografitokens med article.css men är egna komponenter, inte
   nyhetsartiklar (ingen betalvägg/dela/"Läs också"). */

.ff-commerce-single {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ff-commerce-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-commerce-head__eyebrow {
  font-size: 12px;
  color: var(--ff-blue);
}
.ff-commerce-head__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: pretty;
}
.ff-commerce-head__subtitle {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ff-text-secondary);
}

.ff-commerce-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ff-text-meta);
}
.ff-commerce-meta__item::before {
  content: "·";
  margin-right: 14px;
  color: var(--ff-divider);
}
.ff-commerce-meta__item:first-child::before { content: none; margin-right: 0; }

.ff-commerce-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ff-dark);
  background: var(--ff-green-light);
  padding: 5px 10px;
  align-self: flex-start;
}
.ff-commerce-badge--muted {
  background: var(--ff-hover-dropdown);
  color: var(--ff-text-soft);
  border: 1px solid var(--ff-border);
}

.ff-commerce-figure {
  margin: 0;
}

/* Logotyp (leverantörer/branschlänkar) - innehållen, inte beskuren, se
   template-parts/single/companies.php. */
.ff-commerce-logo-hero {
  display: flex;
  align-items: center;
  padding: 20px 28px;
  background: #ffffff;
  border: 1px solid var(--ff-border-logo);
  align-self: flex-start;
  max-width: 320px;
}
.ff-commerce-logo-hero img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
}
.ff-commerce-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Brödtext återanvänder samma typografi som artikelns .ff-article-body
   (se article.css) - annonseras inte som separat klass, bara samma
   klass på div:en, så vi slipper duplicera reglerna. */

.ff-commerce-cta {
  align-self: flex-start;
  background: var(--ff-green);
  color: var(--ff-dark);
  text-decoration: none;
  padding: 15px 28px;
  font-family: var(--ff-font-sans);
  font-size: 16px;
  font-weight: 700;
}
.ff-commerce-cta:hover { background: var(--ff-green-hover); color: var(--ff-dark); }

.ff-commerce-columns {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  min-width: 0;
}
/* Partnerprofiler utan faktaruta (se template-parts/single/partner-profile.php) -
   ingen tom högerkolumn att reservera plats för. */
.ff-commerce-columns--full {
  grid-template-columns: 1fr;
}
.ff-commerce-columns .ff-article-body,
.ff-commerce-columns .ff-factbox { min-width: 0; }
@media (max-width: 1239px) and (min-width: 1024px) {
  /* Matchar grid.css breakpoint dar .ff-col-main smalnar av till
     minmax(360px, 1fr) - 320px-faktarutan far inte langre plats
     bredvid brodtexten dar, sa vi staplar tidigare an 1023px-regeln
     nedan skulle ge. */
  .ff-commerce-columns { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  .ff-commerce-columns { grid-template-columns: 1fr; }
}

/* Infoboxen återanvänder .ff-factbox (article.css) för själva ramen -
   det här är bara innehållet inuti. */
.ff-commerce-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ff-commerce-info dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-commerce-info dt {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ff-text-meta);
}
.ff-commerce-info dd {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--ff-body-copy);
}
.ff-commerce-info a { word-break: break-word; }
.ff-commerce-info img.ff-commerce-logo {
  max-width: 160px;
  max-height: 80px;
  object-fit: contain;
  margin-bottom: 4px;
}

.ff-commerce-sessions {
  display: flex;
  flex-direction: column;
}
.ff-commerce-session {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ff-border-weak);
  font-size: 14px;
  color: var(--ff-body-copy);
}
.ff-commerce-session:last-child { border-bottom: 0; }
.ff-commerce-session__date {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 13px;
  color: var(--ff-dark);
}

.ff-commerce-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.ff-commerce-related {
  border-top: 1px solid var(--ff-border);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ff-commerce-related__title {
  margin: 0;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ff-dark);
}
.ff-commerce-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 700px) {
  .ff-commerce-related__grid { grid-template-columns: 1fr; }
}

/* Erbjudanden (medlemsrabatter) - klubbmedlemsraden och koden döljs helt
   för icke-medlemmar, se template-parts/single/erbjudanden.php. */
.ff-commerce-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ff-hover-dropdown);
  border: 1px dashed var(--ff-green);
  padding: 12px 18px;
  font-family: var(--ff-font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ff-dark);
  align-self: flex-start;
}

/* Generisk profilmall (11 innehållstyper utan egen design ännu, se
   inc/commerce.php ff_generic_profile_post_types()). Medvetet enkel. */
.ff-generic-profile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 780px;
}
.ff-generic-profile__back {
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-dark);
  border-bottom: 2px solid var(--ff-green);
  padding-bottom: 3px;
  align-self: flex-start;
}

@media (max-width: 1023px) {
  .ff-commerce-head__title { font-size: 30px; max-width: none; }
  .ff-commerce-columns { grid-template-columns: 1fr; gap: 24px; }
}

/* "Medlemsförmåner" (/rabatter/, template-erbjudanden.php) - teasergrid
   över alla erbjudanden (CPT "erbjudanden"), länkar vidare till
   respektive erbjudandes egen sida (single-erbjudanden.php) där
   rabattkoden visas för klubbmedlemmar. Se
   template-parts/single/erbjudanden-list.php och
   template-parts/module/offer-card.php. */
.ff-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.ff-offer-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ff-card-bg);
  border: 1px solid var(--ff-border);
  padding: 20px;
}
.ff-offer-card:hover { border-color: var(--ff-green); }
.ff-offer-card__logo {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-offer-card__logo img { max-width: 100%; max-height: 72px; object-fit: contain; }
.ff-offer-card__title {
  margin: 0;
  font-family: var(--ff-font-serif);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
}
.ff-offer-card__title a { color: var(--ff-dark); }
.ff-offer-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ff-card-copy);
}
.ff-offer-card__meta {
  font-size: 11px;
  color: var(--ff-text-meta);
}
.ff-offer-card__link { margin-top: auto; }