/* Safari Gulf Growth: front-end. Colours follow the site (deep green + sand); override the variables from the theme if needed. */
:root {
  --sgge-green: #1f5c40;
  --sgge-green-ink: #ffffff;
  --sgge-sand: #f6efe2;
  --sgge-gold: #b98a3e;
  --sgge-line: rgba(31, 92, 64, .16);
  --sgge-radius: 16px;
}

.sgge-dest { line-height: 1.85; }
.sgge-dest__lead { font-size: 1.15em; font-weight: 600; }
.sgge-dest h2 { margin-top: 1.8em; }

.sgge-dest__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.6em 0; }
.sgge-fact { background: var(--sgge-sand); border: 1px solid var(--sgge-line); border-radius: var(--sgge-radius); padding: 16px 18px; }
.sgge-fact strong { display: block; color: var(--sgge-green); margin-bottom: 4px; }
.sgge-fact p { margin: 0; }
.sgge-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sgge-chips span { background: #fff; border: 1px solid var(--sgge-line); border-radius: 999px; padding: 2px 10px; font-size: .9em; }

.sgge-list { padding-inline-start: 1.2em; }
.sgge-list li { margin: .35em 0; }

.sgge-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 1em 0 1.6em; }
.sgge-trip { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--sgge-line); border-radius: var(--sgge-radius); background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.sgge-trip:hover, .sgge-trip:focus-visible { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.sgge-trip__meta { font-size: .85em; color: var(--sgge-gold); }
.sgge-trip__title { font-weight: 700; color: var(--sgge-green); }
.sgge-trip__price { font-size: .9em; }
.sgge-badge { position: absolute; inset-inline-end: 12px; top: 12px; font-size: .75em; background: var(--sgge-sand); border-radius: 999px; padding: 1px 8px; }

.sgge-cta { margin: 2em 0; padding: 22px 24px; border-radius: var(--sgge-radius); background: var(--sgge-green); color: var(--sgge-green-ink); }
.sgge-cta__title { font-size: 1.25em; font-weight: 700; margin: 0 0 .3em; }
.sgge-cta__text { margin: 0 0 1em; opacity: .9; }
.sgge-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.sgge-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--sgge-line); background: #fff; color: var(--sgge-green); font-weight: 700; text-decoration: none; }
.sgge-btn--primary { background: var(--sgge-green); color: var(--sgge-green-ink); border-color: var(--sgge-green); }
.sgge-cta .sgge-btn--primary { background: #fff; color: var(--sgge-green); border-color: #fff; }
.sgge-cta .sgge-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.sgge-btn:focus-visible { outline: 3px solid var(--sgge-gold); outline-offset: 2px; }

.sgge-faq { border: 1px solid var(--sgge-line); border-radius: 12px; padding: .8em 1em; margin: .5em 0; }
.sgge-faq summary { cursor: pointer; font-weight: 700; }
.sgge-sources { margin-top: 2em; font-size: .85em; opacity: .8; }

.sgge-est { margin: 1.5em 0; padding: 22px 24px; border: 1px solid var(--sgge-line); border-radius: var(--sgge-radius); background: var(--sgge-sand); }
.sgge-est__title { font-weight: 700; font-size: 1.15em; margin: 0 0 1em; color: var(--sgge-green); }
.sgge-est__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sgge-est__grid label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; font-weight: 600; }
.sgge-est__grid select, .sgge-est__grid input { min-height: 44px; border-radius: 10px; border: 1px solid var(--sgge-line); padding: 0 10px; background: #fff; font: inherit; }
.sgge-est__result { margin-top: 1.2em; }
.sgge-est__label { margin: 0; font-size: .9em; }
.sgge-est__range { margin: .1em 0; font-size: 1.6em; font-weight: 800; color: var(--sgge-green); }
.sgge-est__typical { margin: 0 0 .4em; }
.sgge-est__basis { font-size: .8em; opacity: .75; }

@media (prefers-reduced-motion: reduce) { .sgge-trip { transition: none; } .sgge-trip:hover { transform: none; } }