/* Guide pages (Crab Island). No mockup: built from the site's own parts (hero, palms, wave, cards, chips). */

/* Photo header, like the homepage hero but one photo and a shorter band */
.tdid-guide-hero { position: relative; height: 520px; background: var(--tdid-hero-fallback, #3F98AB) center 55% / cover no-repeat; overflow: visible; clip-path: inset(0 0 -8px 0); }
.tdid-guide-hero + * { position: relative; z-index: 0; }
.tdid-guide-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42)); }
.tdid-guide-hero .tdid-palms { z-index: 1; }
.tdid-guide-hero__text { position: absolute; left: 0; right: 0; top: 120px; z-index: 2; padding: 0 24px; text-align: center; }
.tdid-guide-hero__script { font-family: var(--tdid-font-script); font-size: 50px; line-height: 1; color: #FFFFFF; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.tdid-guide-hero__title { max-width: 980px; margin: 4px auto 0; font-size: 58px; line-height: 1.05; color: #FFFFFF; text-shadow: 0 3px 14px rgba(0,0,0,0.35); }
.tdid-guide-hero__intro { max-width: 640px; margin: 16px auto 0; font-size: 18px; line-height: 1.5; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.tdid-guide-hero .tdid-wave { z-index: 2; bottom: -6px; }

.tdid-guide__in { max-width: 1100px; margin: 0 auto; }
/* The page wrapper hides overflow; "clip" does the same without breaking the sticky jump bar. */
.tdid-page.tdid-guide-page { overflow: clip; }

/* Jump links */
.tdid-guide-jump { position: sticky; top: 0; z-index: 5; padding: 14px 40px; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--tdid-border, #D5E7E5); }
.tdid-guide-jump .tdid-guide__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tdid-guide-jump__label { flex: 0 0 auto; white-space: nowrap; margin-right: 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tdid-muted); }
.tdid-guide-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--tdid-border, #D5E7E5); border-radius: 22px; background: var(--tdid-bg-light, #F2FAF8); color: var(--tdid-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.tdid-guide-jump a:hover, .tdid-guide-jump a:focus { background: var(--tdid-chip, #DDF1F0); }

/* Content */
.tdid-guide { padding: 40px 40px 24px; }
.tdid-guide__content > p { max-width: 760px; margin: 0 auto 20px; font-size: 18px; line-height: 1.7; color: var(--tdid-text); text-align: center; }
.tdid-guide__content > p a { color: var(--tdid-button); font-weight: 700; }
.tdid-guide__content h2 { scroll-margin-top: 80px; margin: 48px 0 6px; font-family: var(--tdid-font-display, 'Archivo Black', Arial, sans-serif); font-weight: 400; font-size: 30px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--tdid-accent); }
.tdid-guide__content h2 + p { max-width: none; margin: 0 0 22px; font-size: 16px; text-align: left; color: var(--tdid-muted); }

/* Quick facts */
.tdid-guide-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px auto 12px; padding: 0; list-style: none; }
.tdid-guide-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 22px; background: var(--tdid-chip, #DDF1F0); font-size: 15px; font-weight: 700; color: var(--tdid-text); }
.tdid-guide-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tdid-accent); }

/* Option cards */
.tdid-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin: 0 0 12px; }
.tdid-guide-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #E3ECEE; border-radius: 18px; background: #FFFFFF; }
.tdid-guide-card__photo { position: relative; display: block; height: 200px; overflow: hidden; background: var(--tdid-bg-light, #F2FAF8); }
.tdid-guide-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.tdid-guide-card:hover .tdid-guide-card__photo img { transform: scale(1.03); }
.tdid-guide-card__photo.is-empty { background: linear-gradient(135deg, #3F98AB, #0E9A90); }
.tdid-guide-card__photo.is-empty .tdid-palms { opacity: 0.5; }
.tdid-guide-card__ph { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font-family: var(--tdid-font-script); font-size: 26px; line-height: 1.1; color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.tdid-guide-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 18px 20px 22px; }
.tdid-guide-card__name { margin: 0 0 8px; font-family: var(--tdid-font-display, 'Archivo Black', Arial, sans-serif); font-weight: 400; font-size: 19px; line-height: 1.25; letter-spacing: 0.01em; text-transform: uppercase; }
.tdid-guide-card__name a { color: var(--tdid-text); text-decoration: none; }
.tdid-guide-card__name a:hover { color: var(--tdid-button); }
.tdid-guide-card__text { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--tdid-muted); }
.tdid-guide-card__btn { align-self: flex-start; margin-top: auto; padding: 11px 22px; border-radius: 24px; background: var(--tdid-button); color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; }
.tdid-guide-card__btn:hover, .tdid-guide-card__btn:focus { background: var(--tdid-text); color: #FFFFFF; }

/* Product cards (Extras) */
.tdid-guide-grid--products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.tdid-guide-card--product .tdid-guide-card__photo { height: 180px; background: #FFFFFF; }
.tdid-guide-card--product .tdid-guide-card__photo.is-empty { background: linear-gradient(135deg, #3F98AB, #0E9A90); }
.tdid-guide-card--product .tdid-guide-card__photo img { object-fit: contain; padding: 12px; box-sizing: border-box; }
.tdid-guide-card--product .tdid-guide-card__name { font-size: 16px; }
.tdid-guide-card--product .tdid-guide-card__ph { font-size: 22px; }
.tdid-guide-card--product .tdid-guide-card__btn { padding: 9px 18px; font-size: 13px; }

/* Directory listings */
.tdid-guide-listings { margin-top: 40px; padding: 48px 40px 56px; background: var(--tdid-bg-light, #F2FAF8); }
.tdid-guide-listings__title { margin: 0 0 22px; font-family: var(--tdid-font-display, 'Archivo Black', Arial, sans-serif); font-weight: 400; font-size: 30px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--tdid-accent); }
.tdid-guide-listings__more { margin: 28px 0 0; text-align: center; }

.tdid-guide-disclose { padding: 24px 40px 56px; }
.tdid-guide-disclose p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tdid-muted); }

@media (max-width: 960px) {
	.tdid-guide-hero { height: 440px; }
	.tdid-guide-hero__text { top: 90px; padding: 0 16px; }
	.tdid-guide-hero__script { font-size: 34px; }
	.tdid-guide-hero__title { font-size: 34px; }
	.tdid-guide-hero__intro { font-size: 16px; }
	.tdid-guide-jump { padding: 10px 16px; }
	.tdid-guide-jump .tdid-guide__in { flex-wrap: nowrap; overflow-x: auto; }
	.tdid-guide-jump a { flex: 0 0 auto; white-space: nowrap; }
	.tdid-guide { padding: 28px 16px 16px; }
	.tdid-guide__content > p { font-size: 16px; }
	.tdid-guide__content h2 { font-size: 24px; }
	.tdid-guide-grid { grid-template-columns: minmax(0, 1fr); }
	.tdid-guide-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tdid-guide-listings { padding: 36px 16px 44px; }
	.tdid-guide-listings__title { font-size: 24px; }
	.tdid-guide-disclose { padding: 20px 16px 40px; }
}

/* Title split over three lines (script / big / small) */
.tdid-guide-hero__h1 { margin: 0; font-size: inherit; }
.tdid-guide-hero__h1 .tdid-guide-hero__script, .tdid-guide-hero__h1 .tdid-guide-hero__title, .tdid-guide-hero__h1 .tdid-guide-hero__sub { display: block; }
.tdid-guide-hero__h1 .tdid-guide-hero__title { font-size: 84px; }
.tdid-guide-hero__sub { margin-top: 8px; font-family: var(--tdid-font-body, Montserrat, Arial, sans-serif); font-size: 22px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
@media (max-width: 960px) {
	.tdid-guide-hero__h1 .tdid-guide-hero__title { font-size: 48px; }
	.tdid-guide-hero__sub { font-size: 16px; }
}

/* ---------- Blog-style reading (Cali, 3 Nov 2026): text column like a blog post, name-only tiles under each section ---------- */
.tdid-guide__content { max-width: 820px; }
.tdid-guide__content > p, .tdid-guide__content h2 + p { max-width: none; margin: 0 0 20px; font-size: 17px; line-height: 1.7; text-align: left; color: var(--tdid-text); }
.tdid-guide__content > p:first-child { font-size: 18px; }
.tdid-guide__content > p a { color: var(--tdid-button); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tdid-guide__content > p strong a, .tdid-guide__content > p a strong { font-weight: 800; }
.tdid-guide__content h2 { margin-top: 44px; }

.tdid-guide-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin: 4px 0 8px; }
.tdid-guide-tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #E3ECEE; border-radius: 16px; background: #FFFFFF; color: var(--tdid-text); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
a.tdid-guide-tile:hover, a.tdid-guide-tile:focus { border-color: var(--tdid-accent); box-shadow: 0 6px 18px rgba(11, 60, 73, 0.1); color: var(--tdid-text); }
.tdid-guide-tile__photo { position: relative; display: block; height: 140px; overflow: hidden; background: var(--tdid-bg-light, #F2FAF8); }
.tdid-guide-tile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
a.tdid-guide-tile:hover .tdid-guide-tile__photo img { transform: scale(1.04); }
.tdid-guide-tile__photo.is-empty { background: linear-gradient(135deg, #3F98AB, #0E9A90); }
.tdid-guide-tile__photo.is-empty .tdid-palms { opacity: 0.5; }
.tdid-guide-tile__name { display: block; padding: 12px 14px 14px; font-family: var(--tdid-font-display, 'Archivo Black', Arial, sans-serif); font-size: 15px; line-height: 1.25; letter-spacing: 0.01em; text-transform: uppercase; }
.tdid-guide-tile--product .tdid-guide-tile__photo { background: #FFFFFF; }
.tdid-guide-tile--product .tdid-guide-tile__photo.is-empty { background: linear-gradient(135deg, #3F98AB, #0E9A90); }
.tdid-guide-tile--product .tdid-guide-tile__photo img { object-fit: contain; padding: 10px; box-sizing: border-box; }

@media (max-width: 960px) {
	.tdid-guide__content > p, .tdid-guide__content h2 + p { font-size: 16px; }
	.tdid-guide-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tdid-guide-tile__photo { height: 110px; }
	.tdid-guide-tile__name { padding: 10px 12px 12px; font-size: 13px; }
}

/* Live cam player (Destin Live Beach Cams page) */
.tdid-cam { margin: 8px 0 12px; }
.tdid-cam__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--tdid-accent); border-radius: 20px; background: #0B2E33; }
.tdid-cam__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tdid-cam__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; font-size: 15px; color: var(--tdid-muted); }
.tdid-cam__caption strong { font-size: 16px; color: var(--tdid-text); }
.tdid-cam__credit { margin-left: auto; font-size: 13px; }
.tdid-cam__credit a { color: var(--tdid-button); font-weight: 700; }
@media (max-width: 960px) {
	.tdid-cam__frame { border-radius: 14px; }
	.tdid-cam__credit { margin-left: 0; flex-basis: 100%; }
}

/* Live cam link cards: compact, no photo */
.tdid-guide-grid--cams { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.tdid-guide-card--cam { border-top: 4px solid var(--tdid-accent); }
.tdid-guide-card--cam .tdid-guide-card__body { padding: 18px 20px 20px; }
.tdid-guide-card__tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: 10px; padding: 4px 10px; border-radius: 12px; background: var(--tdid-chip, #DDF1F0); color: var(--tdid-text); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tdid-guide-card__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #D93A3A; }
.tdid-guide-card--cam .tdid-guide-card__name { font-size: 17px; }
.tdid-guide-card--cam .tdid-guide-card__text { font-size: 14px; }
.tdid-guide-card--cam .tdid-guide-card__btn { padding: 9px 18px; font-size: 13px; }