/* Safari Gulf Growth: Content Factory pages. Uses the variables from front.css. */
.sgf-main { padding: 28px 0 56px; }
.sgf-container { max-width: 920px; margin-inline: auto; padding-inline: 16px; line-height: 1.85; }
.sgf-crumbs { font-size: .85em; opacity: .75; margin-bottom: 10px; }
.sgf-crumbs a { color: inherit; }
.sgf-title { color: var(--sgge-green); font-size: clamp(1.7em, 4vw, 2.4em); line-height: 1.3; margin: .2em 0 .5em; }
.sgf-lead { font-size: 1.12em; font-weight: 600; }
.sgf-main h2 { margin-top: 1.8em; color: var(--sgge-green); }
.sgf-admin-note { background: #fff4d6; border: 1px solid #e6c46b; border-radius: 8px; padding: 6px 12px; font-size: .85em; }

.sgf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 1.4em 0; }
.sgf-facts > div { background: var(--sgge-sand); border: 1px solid var(--sgge-line); border-radius: 12px; padding: 12px 14px; }
.sgf-facts dt { font-size: .8em; opacity: .75; }
.sgf-facts dd { margin: 2px 0 0; font-weight: 700; }

.sgf-table-wrap { overflow-x: auto; margin: 1em 0; border: 1px solid var(--sgge-line); border-radius: 12px; }
.sgf-table { width: 100%; border-collapse: collapse; font-size: .92em; min-width: 520px; }
.sgf-table th, .sgf-table td { padding: 9px 12px; border-bottom: 1px solid var(--sgge-line); text-align: start; vertical-align: top; }
.sgf-table thead th { background: var(--sgge-sand); font-weight: 700; }
.sgf-table tr.is-current td { background: rgba(185, 138, 62, .14); font-weight: 700; }
.sgf-compare tbody th { width: 30%; font-weight: 600; }
.sgf-compare { min-width: 0; table-layout: fixed; }
@media (max-width: 600px) {
  .sgf-table th, .sgf-table td { padding: 7px 8px; }
  .sgf-compare { font-size: .82em; }
  .sgf-compare td, .sgf-compare th { overflow-wrap: anywhere; }
}
.sgf-stars { color: var(--sgge-gold); letter-spacing: 1px; white-space: nowrap; }
.sgf-stars__off { opacity: .22; }

.sgf-month-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 1.2em 0; }
.sgf-month-card > div { border-radius: 12px; padding: 12px 14px; background: var(--sgge-sand); border: 1px solid var(--sgge-line); }
.sgf-month-card span { display: block; font-size: .8em; opacity: .75; }
.sgf-month-card strong { font-size: 1.1em; }
.sgf-month-card--great > div:first-child { background: var(--sgge-green); color: #fff; }
.sgf-month-card--off > div:first-child { background: #f3e1dc; }

.sgf-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sgf-chips li { background: #fff; border: 1px solid var(--sgge-line); border-radius: 999px; padding: 3px 12px; font-size: .9em; }
.sgf-chips a { text-decoration: none; }
.sgf-links { columns: 2 220px; padding-inline-start: 1.1em; }
.sgf-links li { break-inside: avoid; margin: .25em 0; }
.sgf-links span, .sgf-rank span { font-size: .85em; opacity: .7; }
.sgf-rank li { margin: .7em 0; }
.sgf-rank p { margin: .2em 0 0; font-size: .92em; }
.sgf-pager { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 1.8em 0; }
.sgf-pager a { border: 1px solid var(--sgge-line); border-radius: 10px; padding: 8px 14px; text-decoration: none; }
.sgf-score { font-size: 1.1em; }
.sgf-note { opacity: .8; }

.sgf-faq details { border: 1px solid var(--sgge-line); border-radius: 12px; padding: .8em 1em; margin: .5em 0; background: #fff; }
.sgf-faq summary { cursor: pointer; font-weight: 700; }
.sgf-sources { margin-top: 2.2em; font-size: .82em; opacity: .75; }