/* This Week in Puerto Vallarta (/this-week). Scoped tw- classes; uses existing VPG tokens. */
.tw-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(340px, 38vw, 460px); display: flex; align-items: center; background: var(--vpg-deep-navy); }
.tw-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; z-index: -2; }
.tw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(23, 47, 73, 0.88) 0%, rgba(23, 47, 73, 0.66) 48%, rgba(23, 47, 73, 0.18) 85%); }
.tw-hero-inner { padding-block: clamp(40px, 6vw, 72px); display: grid; gap: 14px; max-width: 760px; margin-left: max(16px, calc((100vw - var(--max)) / 2)); }
.tw-hero h1 { color: var(--vpg-white); font-family: var(--font-hero-display); font-weight: 400; font-size: var(--text-hero); line-height: var(--line-heading); margin: 0; }
.tw-hero p { color: rgba(255, 255, 255, 0.92); margin: 0; font-size: var(--text-md); }
.tw-hero .eyebrow { color: var(--vpg-gold) !important; }
.tw-hero .tw-week { font-family: var(--font-heading); font-weight: 700; color: var(--vpg-gold); letter-spacing: 0.02em; }

.tw-wrap { max-width: 900px; }
main > .tw-hero + .section { padding-top: clamp(22px, 2.6vw, 34px); }

.tw-notice { background: rgba(247, 197, 43, 0.14); border: 1px solid rgba(200, 136, 47, 0.45); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 28px; }
.tw-notice strong { display: block; font-family: var(--font-heading); color: var(--vpg-navy); margin-bottom: 4px; }
.tw-notice p { margin: 0; color: var(--ink); }
.tw-notice a { color: var(--vpg-navy); font-weight: 700; }

.tw-events { display: grid; gap: 14px; }
.tw-event { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--vpg-white); border: 1px solid var(--vpg-border); border-radius: var(--radius); padding: 18px; }
.tw-date { display: grid; justify-items: center; align-content: center; background: var(--vpg-navy); color: var(--vpg-white); border-radius: var(--radius); padding: 10px 6px; line-height: 1.1; }
.tw-date span, .tw-date em { font-family: var(--font-heading); font-style: normal; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vpg-gold); }
.tw-date strong { font-family: var(--font-heading); font-size: var(--text-xl); }
.tw-body h3 { margin: 0 0 4px; font-family: var(--font-heading); font-size: var(--text-md); color: var(--vpg-navy); }
.tw-body p { margin: 0; color: var(--muted); }
.tw-body .tw-meta, .tw-feature .tw-meta { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--ink); margin: 0 0 6px; }

.tw-feature { margin-top: 22px; background: var(--vpg-navy); color: var(--vpg-white); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); display: grid; gap: 8px; }
.tw-feature .eyebrow { color: var(--vpg-gold) !important; margin: 0; }
.tw-feature h3 { margin: 0; font-family: var(--font-heading); font-size: var(--text-xl); color: var(--vpg-white); }
.tw-feature p { margin: 0; color: #dbe2f5; }
.tw-feature .tw-meta { color: var(--vpg-white); }

.tw-tip { margin: 22px 0 0; color: var(--muted); }
.tw-tip strong { color: var(--vpg-navy); }

.tw-every { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tw-every > div { background: var(--vpg-white); border: 1px solid var(--vpg-border); border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; align-content: start; }
.tw-every h3 { margin: 0; font-family: var(--font-heading); font-size: var(--text-md); color: var(--vpg-navy); }
.tw-every p { margin: 0; color: var(--muted); }
.tw-small { margin: 20px 0 0; font-size: var(--text-sm); color: var(--muted); }

main > .tw-every-section, main > .tw-hero + .section { padding-bottom: clamp(26px, 3.2vw, 44px); }
main > .section.cta-section { padding: clamp(36px, 4.5vw, 60px) 0; }

@media (max-width: 760px) {
  .tw-hero { align-items: flex-end; min-height: 440px; }
  .tw-hero::before { background: linear-gradient(180deg, rgba(23, 47, 73, 0.1) 0%, rgba(23, 47, 73, 0.55) 40%, rgba(23, 47, 73, 0.92) 100%); }
  .tw-hero-inner { margin-left: 16px; margin-right: 16px; }
  .tw-event { grid-template-columns: 62px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .tw-every { grid-template-columns: 1fr; }
}