/* ============================================================
   Legión4Ever — Master Responsive Overrides
   Loaded LAST — only media-query rules, nothing touched at desktop.
   Breakpoints: 1024 → 900 → 768 → 640 → 480
   ============================================================ */

/* ================================================================
   ▸ GLOBAL MOBILE FIXES (Prevents images from collapsing on Android/iOS)
   ================================================================ */
.news-card-thumb,
.card-image-wrapper,
.stream-thumb-wrapper {
  position: relative !important;
  display: block;
}

.news-card-thumb img,
.card-image-wrapper img,
.stream-thumb-wrapper img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Article Hero Image: prevent collapse and ensure full cinematic display */
.article-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 480px !important;
  max-height: 500px !important;
  overflow: hidden !important;
  background: var(--bg-deep);
}

.article-hero img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.roadmap-home-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   ▸ TABLET LANDSCAPE  (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {

  /* ── Global spacing adjustments ── */
  .container {
    padding-inline: var(--space-md);
  }

  /* ── Talentos / Talent Calculator ── */
  .tc-trees-wrapper {
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
  }

  .tc-tree {
    width: 100%;
    max-width: 360px;
  }

  .tc-header-section {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
  }

  .tc-info-panel {
    gap: 14px;
    flex-wrap: wrap;
  }

  .tc-class-icons {
    flex-wrap: wrap;
    gap: 6px;
  }

  .tc-class-icon {
    width: 38px;
    height: 38px;
  }

  /* ── Calendar / Next Raid ── */
  .checklist-section {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* ================================================================
   ▸ SMALL TABLET / LARGE PHONE  (max-width: 900px)
   ================================================================ */
@media (max-width: 900px) {

  /* ── Guías tactics grid ── */
  .tactics-grid {
    grid-template-columns: 1fr;
  }

  .addons-grid {
    grid-template-columns: 1fr;
  }

  .macros-grid {
    grid-template-columns: 1fr;
  }

  /* ── Calendar ── */
  .schedule-grid {
    grid-template-columns: 1fr 1fr;
  }

  .checklist-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Hermandad — Officers ── */
  .officers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  /* ── Loot section padding ── */
  .loot-section {
    padding: var(--space-xl) var(--space-lg);
  }

  .loot-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Portal hero ── */
  .portal-hero-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ================================================================
   ▸ TABLET PORTRAIT / PHONE LANDSCAPE  (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* ── Global layout ── */
  .container {
    padding-inline: var(--space-md);
  }

  .page-content {
    padding-top: var(--nav-height);
  }

  .article-hero {
    height: 300px !important;
    max-height: 320px !important;
  }

  /* ── Coming soon card ── */
  .coming-soon-card {
    padding: var(--space-xl) var(--space-md);
    margin-inline: var(--space-sm);
  }

  .coming-soon-timer-box {
    padding: var(--space-md);
  }

  /* ── Calendar ── */
  .schedule-grid {
    grid-template-columns: 1fr;
  }

  .checklist-grid {
    grid-template-columns: 1fr;
  }

  .checklist-section {
    padding: var(--space-lg) var(--space-md);
  }

  .next-raid-card {
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .raid-countdown-slots {
    gap: var(--space-sm);
  }

  .raid-slot-val {
    font-size: 1.8rem;
  }

  .detail-label {
    min-width: 100px;
    font-size: var(--fs-xs);
  }

  .detail-row {
    font-size: var(--fs-small);
    flex-wrap: wrap;
  }

  /* ── Hermandad ── */
  .officers-grid {
    grid-template-columns: 1fr;
  }

  .loot-grid {
    grid-template-columns: 1fr;
  }

  .guild-desc,
  .recruitment-desc,
  .guides-desc,
  .calendar-desc {
    font-size: var(--fs-body);
  }

  /* ── Guides tabs ── */
  .guides-tabs {
    gap: var(--space-xs);
  }

  .guide-tab-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--fs-xs);
  }

  .tactic-filters {
    gap: var(--space-xs);
  }

  .tactic-filter-btn {
    padding: 5px 12px;
    font-size: var(--fs-xs);
  }

  .tactic-role-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* ── Roadmap ── */
  .roadmap-nav-chips {
    gap: var(--space-xs);
  }

  .roadmap-chip {
    font-size: 0.6rem;
    padding: var(--space-xs) var(--space-sm);
  }

  .roadmap-cta-box {
    padding: var(--space-xl) var(--space-md);
  }

  .roadmap-cta-title {
    font-size: 1.3rem;
  }

  /* ── Streams live bar ── */
  .streams-live-stats {
    gap: var(--space-sm);
  }

  .stat-item {
    font-size: var(--fs-xs);
  }

  /* ── Platform filters ── */
  .platform-filters {
    gap: var(--space-xs);
  }

  .platform-filter-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.65rem;
    gap: 4px;
  }

  /* ── Roster ── */
  .roster-stats {
    flex-wrap: wrap;
    justify-content: center;
  }

  .role-filters {
    gap: var(--space-xs);
  }

  .role-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.6rem;
  }

  /* ── Character Sheet ── */
  .charsheet-tabs {
    flex-wrap: wrap;
    gap: var(--space-xs);
    border-bottom: none;
  }

  .charsheet-tab {
    flex: 1 1 auto;
    min-width: 120px;
    text-align: center;
    padding: 8px 14px;
    font-size: var(--fs-small);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
  }

  .charsheet-tab.active {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-gold);
  }

  .equip-stats-bar {
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .equip-stat-chip {
    font-size: var(--fs-xs);
  }

  .equip-stat-chip strong {
    font-size: var(--fs-body);
  }

  /* ── Portal ── */
  .portal-user-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .portal-submeta {
    gap: var(--space-sm);
  }

  .portal-profile-hero {
    padding: var(--space-xl) var(--space-md);
  }

  .portal-card {
    padding: var(--space-lg);
  }

  /* ── Talentos ── */
  .tc-main-container {
    margin: var(--space-md) auto;
    border-radius: var(--radius-md);
  }

  .tc-trees-wrapper {
    padding: var(--space-md);
  }

  .tc-tree {
    max-width: 100%;
  }

  .tc-grid {
    gap: 10px;
    padding: 14px 12px 18px;
  }

  .tc-tooltip {
    width: 220px;
    font-size: var(--fs-xs);
    padding: 10px 12px;
  }
}

/* ================================================================
   ▸ PHONE LANDSCAPE / SMALL TABLET  (max-width: 640px)
   ================================================================ */
@media (max-width: 640px) {

  /* ── Vacancy grid ── */
  .vacancy-grid {
    grid-template-columns: 1fr;
  }

  .vacancy-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .vacancy-title {
    font-size: var(--fs-h3);
  }

  .vacancy-legend {
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  /* ── Characters grid ── */
  .characters-grid {
    grid-template-columns: 1fr;
  }

  /* ── Attendance ── */
  .attendance-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Chat ── */
  .chat-bubble {
    max-width: 95%;
  }

  .chat-reply-form {
    flex-direction: column;
  }

  .chat-reply-form input[type="text"] {
    width: 100%;
  }

  /* ── Portal auth card ── */
  .portal-auth-card {
    padding: var(--space-xl) var(--space-md);
  }

  /* ── Breadcrumbs ── */
  .breadcrumb {
    font-size: var(--fs-xs);
    flex-wrap: wrap;
  }

  /* ── Article ── */
  .article-container {
    padding-inline: var(--space-md);
  }

  .article-content {
    font-size: var(--fs-body);
    line-height: 1.75;
  }

  .article-excerpt {
    font-size: var(--fs-body);
    padding-left: var(--space-md);
  }

  .article-content blockquote {
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
  }

  .video-embed {
    margin: var(--space-lg) 0;
  }

  /* ── Equip list table ── */
  .equip-table {
    font-size: var(--fs-small);
  }

  .equip-row td {
    padding: 8px 10px;
  }

  .equip-slot-thumb {
    width: 32px;
    height: 32px;
  }

  .equip-item-name {
    font-size: var(--fs-small);
  }

  /* ── Roadmap lightbox ── */
  .lightbox-topbar {
    padding: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .lightbox-title {
    font-size: var(--fs-small);
    width: 100%;
  }

  .lightbox-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .lightbox-content {
    padding: 80px var(--space-sm) var(--space-sm);
  }

  /* ── Roadmap highlight items ── */
  .roadmap-home-highlights {
    gap: var(--space-xs);
  }

  .roadmap-highlight-item {
    font-size: 0.8rem;
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ================================================================
   ▸ PHONE PORTRAIT  (max-width: 480px)
   ================================================================ */
@media (max-width: 480px) {

  /* ── Global ── */
  :root {
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3rem;
  }

  .container {
    padding-inline: var(--space-sm);
  }

  .article-hero {
    height: 220px !important;
    max-height: 240px !important;
  }

  /* ── Navigation ── */
  .nav-inner {
    padding-inline: var(--space-sm);
  }

  .nav-brand img {
    height: 44px;
  }

  .nav-brand-text {
    font-size: 0.9rem;
  }

  /* ── Hero ── */
  .hero-section {
    min-height: 60vh;
  }

  .hero-content {
    padding: var(--space-xl) var(--space-sm) var(--space-lg);
    gap: var(--space-md);
  }

  .hero-description {
    font-size: var(--fs-body);
  }

  .hero-audio-controls {
    bottom: var(--space-md);
    right: var(--space-md);
    padding: 3px 6px;
  }

  .hero-vol-slider {
    width: 50px;
  }

  /* ── Countdown ── */
  .countdown-inner {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .countdown-headline {
    font-size: 0.8rem;
  }

  .countdown-timer {
    gap: var(--space-xs);
  }

  /* ── Section headers ── */
  .heading-section {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  .heading-subsection {
    font-size: clamp(1rem, 4vw, 1.3rem);
  }

  /* ── News cards ── */
  .news-card-body {
    padding: var(--space-md);
  }

  .news-card-title {
    font-size: var(--fs-body);
  }

  /* ── Category filters ── */
  .category-filters {
    gap: 4px;
  }

  .filter-btn {
    font-size: 0.6rem;
    padding: 4px 10px;
  }

  /* ── Pagination ── */
  .pagination {
    gap: 4px;
  }

  .pagination-link {
    min-width: 36px;
    height: 36px;
    font-size: var(--fs-xs);
  }

  /* ── Guides ── */
  .guides-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .guide-tab-btn {
    text-align: center;
    border-radius: var(--radius-md);
  }

  .tactic-card {
    padding: var(--space-md);
  }

  .tactic-header h3 {
    font-size: 1.1rem;
  }

  .addon-card {
    padding: var(--space-md);
  }

  .macro-card {
    padding: var(--space-md);
  }

  .macro-box {
    font-size: 0.78rem;
    padding: var(--space-sm);
  }

  /* ── Hermandad ── */
  .pillar-card {
    padding: var(--space-md);
  }

  .pillar-number {
    font-size: 2rem;
    top: 10px;
    right: 12px;
  }

  .officer-card {
    padding: var(--space-md);
  }

  .officer-avatar {
    width: 60px;
    height: 60px;
  }

  /* ── Recruitment ── */
  .zp-card {
    padding: var(--space-md);
  }

  .vacancy-card {
    padding: var(--space-sm) var(--space-md);
  }

  .apply-section {
    padding: var(--space-lg) var(--space-md);
  }

  /* ── Calendar ── */
  .day-card {
    padding: var(--space-md);
  }

  .raid-slot-val {
    font-size: 1.5rem;
  }

  .raid-slot {
    min-width: 44px;
  }

  .check-item {
    gap: var(--space-sm);
  }

  .check-icon {
    font-size: 1.3rem;
  }

  /* ── Streams ── */
  .streams-live-bar {
    padding: var(--space-sm);
  }

  .stream-card-body {
    padding: var(--space-sm);
  }

  .streamer-avatar {
    width: 36px;
    height: 36px;
  }

  .streamer-name {
    font-size: 0.85rem;
  }

  .stream-title {
    font-size: 0.82rem;
    height: auto;
    -webkit-line-clamp: 2;
  }

  .btn-watch-stream {
    padding: 6px var(--space-sm);
    font-size: 0.65rem;
  }

  /* ── Roadmap ── */
  .roadmap-toolbar {
    padding: var(--space-sm) var(--space-md);
  }

  .btn-roadmap-action {
    padding: 5px 10px;
    font-size: 0.65rem;
  }

  .roadmap-image {
    max-height: 360px;
  }

  .phase-card {
    padding: var(--space-md);
  }

  .phase-title {
    font-size: 1.1rem;
  }

  .phase-milestone-item {
    font-size: 0.82rem;
    padding-left: 18px;
  }

  .phase-milestone-item::before {
    font-size: 0.6rem;
  }

  .roadmap-cta-box {
    padding: var(--space-lg) var(--space-md);
  }

  .roadmap-cta-title {
    font-size: 1.15rem;
  }

  .roadmap-cta-desc {
    font-size: var(--fs-small);
  }

  .roadmap-home-card {
    padding: var(--space-md) var(--space-sm);
  }

  /* ── Roster ── */
  .roster-stat-value {
    font-size: var(--fs-h3);
  }

  .roster-stats {
    gap: var(--space-md);
  }

  /* ── Character Sheet ── */
  .paperdoll {
    grid-template-columns: 44px 1fr 44px;
    gap: 2px;
    padding: var(--space-sm);
  }

  .gear-slot {
    width: 40px;
    height: 40px;
  }

  .paperdoll-model-placeholder {
    width: 120px;
    height: 180px;
    font-size: 2.5rem;
  }

  .paperdoll-center {
    min-height: 300px;
  }

  .paperdoll-char-name {
    font-size: 1rem;
  }

  .equip-stats-bar {
    gap: var(--space-sm);
    padding: var(--space-sm);
    flex-direction: column;
    align-items: center;
  }

  .stats-panel {
    width: 100%;
  }

  .charsheet-tabs {
    gap: 4px;
  }

  .charsheet-tab {
    min-width: 90px;
    padding: 6px 10px;
    font-size: var(--fs-xs);
  }

  .slot-modal {
    padding: var(--space-lg);
  }

  .slot-modal-row {
    grid-template-columns: 1fr;
  }

  .slot-modal-actions {
    flex-direction: column;
  }

  /* ── Portal ── */
  .portal-profile-hero {
    padding: var(--space-lg) var(--space-md);
  }

  .portal-avatar-box {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
  }

  .portal-welcome-text h1 {
    font-size: var(--fs-h3);
  }

  .portal-card {
    padding: var(--space-md);
  }

  .portal-card-title {
    font-size: 1rem;
  }

  .attendance-gauge {
    width: 90px;
    height: 90px;
  }

  .gauge-number {
    font-size: 1.3rem;
  }

  .att-stat-item {
    padding: 6px 10px;
  }

  .att-stat-num {
    font-size: 1.1rem;
  }

  .character-card {
    padding: var(--space-sm) var(--space-md);
  }

  .character-name {
    font-size: var(--fs-body);
  }

  .add-character-box {
    padding: var(--space-md);
  }

  .portal-auth-container {
    padding: var(--space-lg) var(--space-sm);
  }

  .portal-auth-card {
    padding: var(--space-lg) var(--space-md);
  }

  /* ── Footer ── */
  .site-footer {
    padding: var(--space-xl) 0 var(--space-lg);
    margin-top: var(--space-2xl);
  }

  .footer-inner {
    gap: var(--space-lg);
    padding-inline: var(--space-md);
  }

  .footer-brand-title {
    font-size: var(--fs-body);
  }

  .footer-bottom {
    padding-inline: var(--space-md);
    font-size: 0.65rem;
  }

  /* ── Coming Soon card ── */
  .coming-soon-card {
    padding: var(--space-lg) var(--space-sm);
  }

  .coming-soon-icon {
    font-size: 2.5rem;
  }

  .coming-soon-badge {
    font-size: var(--fs-xs);
    padding: 4px 12px;
  }

  .coming-soon-desc {
    font-size: var(--fs-small);
  }

  .coming-soon-actions {
    flex-direction: column;
    width: 100%;
  }

  .coming-soon-actions .btn {
    width: 100%;
  }

  /* ── Section divider ── */
  .section-divider {
    padding: var(--space-lg) 0;
  }

  .section-divider::before,
  .section-divider::after {
    max-width: 80px;
  }

  /* ── Buttons ── */
  .btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--fs-xs);
    letter-spacing: 1px;
  }

  .btn-lg {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--fs-small);
  }

  /* ── Flash messages ── */
  .flash-message {
    font-size: var(--fs-small);
    padding: var(--space-sm) var(--space-md);
  }
}

/* ================================================================
   ▸ VERY SMALL PHONE  (max-width: 360px)
   ================================================================ */
@media (max-width: 360px) {

  .hero-title {
    letter-spacing: 0;
  }

  .hero-subtitle {
    letter-spacing: 1px;
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }

  .countdown-crest {
    width: 28px;
  }

  .countdown-slot {
    min-width: 34px;
  }

  .countdown-value {
    font-size: 1.1rem;
  }

  .countdown-separator {
    font-size: 1rem;
    padding-bottom: 14px;
  }

  .nav-link {
    font-size: var(--fs-small);
    padding: var(--space-xs) var(--space-sm);
  }

  .paperdoll {
    grid-template-columns: 38px 1fr 38px;
  }

  .gear-slot {
    width: 36px;
    height: 36px;
  }
}

/* ================================================================
   ▸ SAFE AREA (notch) & TOUCH OPTIMIZATIONS
   ================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }

  .site-nav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Improve touch target sizes on mobile */
@media (hover: none) and (pointer: coarse) {
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .filter-btn,
  .guide-tab-btn,
  .tactic-filter-btn,
  .platform-filter-btn,
  .role-btn,
  .roadmap-chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .pagination-link {
    min-width: 44px;
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  /* Disable hover transforms on touch devices to prevent sticky states */
  .card:hover,
  .guild-info-card:hover,
  .news-card:hover,
  .stream-card:hover,
  .tactic-card:hover,
  .addon-card:hover,
  .pillar-card:hover,
  .officer-card:hover,
  .zp-card:hover,
  .day-card:hover,
  .phase-card:hover,
  .vacancy-card:hover,
  .portal-card:hover,
  .character-card:hover {
    transform: none;
  }

  /* Keep the visual feedback more subtle on touch */
  .stream-card:active,
  .news-card:active,
  .tactic-card:active,
  .phase-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ================================================================
   ▸ LANDSCAPE PHONE OVERRIDE
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
  }

  .hero-content {
    padding: var(--space-md) var(--space-md) var(--space-md);
    margin-bottom: 0;
    gap: var(--space-sm);
  }

  .countdown-banner {
    position: relative;
    top: auto;
  }
}

/* ================================================================
   ▸ ADMIN DROPDOWN FIX ON MOBILE
   ================================================================ */
@media (max-width: 1160px) {
  /* Force dropdowns to be visible inline within the mobile menu */
  .nav-links.open .nav-item-dropdown {
    display: block !important;
    width: 100%;
    position: static !important;
  }

  .nav-links.open .nav-item-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    width: 100%;
  }

  .nav-links.open .nav-dropdown-menu {
    display: none !important;
    position: static !important;
    transform: none !important;
    background: rgba(26, 9, 13, 0.95) !important;
    border-radius: var(--radius-md) !important;
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-sm) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    left: auto !important;
  }

  .nav-links.open .nav-item-dropdown:focus-within .nav-dropdown-menu,
  .nav-links.open .nav-item-dropdown.dropdown-open .nav-dropdown-menu {
    display: block !important;
  }

  .nav-links.open .nav-dropdown-menu a {
    text-align: center !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Adjust nav-discord within mobile menu */
  .nav-links.open .nav-discord {
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
  }
}