/* ==========================================
   RESPONSIVE: Breakpoints & Overrides
   Mobile-App-Like Design
   ========================================== */

/* ---- Tablet (max 1024px) ---- */
@media (max-width: 1024px) {
  :root {
    --padding-horizontal: 5%;
  }

  nav ul {
    gap: 1.2rem;
  }

  nav a {
    font-size: 0.85rem;
  }

  .carousel-title {
    font-size: 3rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
  }

  .masonry-grid {
    column-count: 2;
    column-gap: 1rem;
  }

  .modal-content {
    padding: 2rem;
    width: 95%;
  }

  .profile-name {
    font-size: 2rem;
  }

  /* Home sections */
  .home-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

/* ---- Feature-specific responsive ---- */
@media (max-width: 900px) {
  .team-layout {
    flex-direction: column;
  }

  .subteams-sidebar {
    width: 100%;
    position: static;
  }

  .steam-detail-body {
    flex-direction: column;
  }

  .steam-side-col {
    width: 100%;
  }

  .carousel-main img {
    max-height: 260px;
  }

  .chapter-thumb {
    width: 100px;
    height: 65px;
  }

  .steam-title {
    font-size: 1.4rem;
  }
}

/* ---- Mobile (max 768px) ---- */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
    --padding-horizontal: 4%;
  }

  /* ---- Navigation ---- */
  nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  /* ---- Carousel ---- */
  .featured-carousel {
    min-height: 380px;
    height: 65vh;
  }

  .carousel-slide-content {
    max-width: 100%;
    padding-bottom: 60px;
  }

  .carousel-title {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
  }

  .carousel-description {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .carousel-meta {
    margin-bottom: 0.4rem;
    gap: 0.4rem;
  }

  .carousel-type-badge {
    font-size: 0.65rem;
  }

  .carousel-tags {
    margin-bottom: 0.6rem;
    gap: 0.3rem;
  }

  .carousel-tag {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
  }

  .carousel-actions {
    flex-direction: row;
    gap: 0.5rem;
  }

  .carousel-btn {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    min-width: auto;
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .carousel-indicators {
    bottom: 40px;
  }

  .carousel-dot .dot-label {
    display: none;
  }

  .carousel-dot {
    width: 24px;
    height: 3px;
    padding: 0;
    border-radius: 2px;
  }

  .carousel-progress {
    bottom: 32px;
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
  }

  /* ---- Page Layout ---- */
  .padded-view {
    padding: calc(var(--nav-height) + 16px) var(--padding-horizontal) 30px;
  }

  .page-title {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
  }

  .page-title::before {
    width: 4px;
    margin-right: 8px;
  }

  .page-description {
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
  }

  /* ---- Grids ---- */
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .portrait-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .masonry-grid {
    column-count: 2;
    column-gap: 0.6rem;
  }

  .masonry-item {
    margin-bottom: 0.6rem;
  }

  /* ---- Game Cards (compact) ---- */
  .game-card:hover {
    transform: translateY(-4px);
  }

  .game-img {
    height: 120px;
  }

  .game-info {
    padding: 0.6rem 0.7rem;
  }

  .game-info h3 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }

  .game-info p {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .game-type-labels {
    gap: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .game-type-label {
    font-size: 0.55rem;
    padding: 0.1rem 0.35rem;
  }

  .tags {
    gap: 0.3rem;
  }

  .tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
  }

  /* ---- Buttons ---- */
  .btn {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
  }

  /* ---- Modal (App-like full-screen) ---- */
  .modal-overlay {
    align-items: flex-end;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    padding: 1.2rem;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-close {
    top: 10px;
    right: 12px;
    font-size: 1.5rem;
  }

  .profile-banner {
    height: 100px;
    margin: -1.2rem -1.2rem 0.8rem -1.2rem;
    width: calc(100% + 2.4rem);
    border-radius: 16px 16px 0 0;
  }

  .profile-modal {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .profile-left {
    flex: 0 0 auto;
  }

  .profile-img-large {
    width: 100px;
    height: 100px;
  }

  .profile-name {
    font-size: 1.4rem;
    text-align: center;
  }

  .profile-role {
    text-align: center;
    font-size: 0.88rem;
    margin-bottom: 0.8rem;
  }

  .profile-bio {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .profile-section-title {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }

  .profile-list {
    margin-bottom: 1rem;
    font-size: 0.85rem;
  }

  .profile-social-links {
    gap: 0.4rem;
  }

  .profile-social-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
  }

  /* ---- Steam detail modal ---- */
  .steam-title {
    font-size: 1.2rem;
  }

  .steam-synopsis {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .steam-info-block {
    padding: 10px;
  }

  .carousel-main img {
    max-height: 200px;
  }

  .carousel-thumbs {
    gap: 5px;
  }

  .carousel-thumb {
    width: 55px;
    height: 35px;
  }

  /* ---- Rating ---- */
  .rating-section {
    padding: 12px;
  }

  .rating-actions {
    gap: 6px;
  }

  .rate-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
  }

  /* ---- Contact ---- */
  .contact-form-container {
    grid-column: 1;
  }

  .contact-links-grid {
    flex-direction: column;
  }

  .contact-link-item {
    width: 100%;
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  /* ---- Footer (compact) ---- */
  footer {
    margin-top: 30px;
    padding: 2rem var(--padding-horizontal) 1.5rem;
  }

  .footer-logo {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .footer-links a {
    font-size: 0.85rem;
  }

  .copyright {
    font-size: 0.78rem;
  }

  /* ---- Home Sections (app-like compact grid) ---- */
  .home-section {
    padding: 0 !important;
    margin-bottom: 1.8rem !important;
  }

  .home-section h2 {
    font-size: 1.15rem !important;
    margin-bottom: 0.8rem !important;
  }

  .home-section h2::before {
    width: 3px;
    height: 0.9em;
  }

  .home-section .see-all-link {
    font-size: 0.78rem;
  }

  .home-section-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }

  /* Compact home project cards */
  .featured-project-card .card-image-wrap img {
    height: 100px;
  }

  .featured-project-card .card-body {
    padding: 0.6rem 0.7rem;
  }

  .featured-project-card .card-body h3 {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
  }

  .featured-project-card .card-body p {
    font-size: 0.72rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .featured-project-card .card-body .tags {
    margin-top: 0.3rem;
  }

  /* Compact home story cards */
  .home-comic-card .card-image-wrap img {
    height: 150px;
  }

  .home-comic-card h4 {
    margin-top: 0.35rem;
    font-size: 0.8rem;
  }

  /* Compact home devforum cards */
  .home-devforum-card .card-image-wrap img {
    height: 100px;
  }

  .home-devforum-card .card-body {
    padding: 0.5rem 0.6rem;
  }

  .home-devforum-card .card-body h4 {
    font-size: 0.8rem;
  }

  .home-devforum-card .card-body p {
    font-size: 0.7rem;
  }

  /* Compact news items */
  .news-item-public {
    padding: 0.8rem 1rem;
  }

  .news-item-public .news-body {
    gap: 0.6rem;
  }

  .news-item-public .news-thumb {
    width: 56px;
    height: 42px;
  }

  .news-item-public h4 {
    font-size: 0.85rem;
  }

  .news-item-public p {
    font-size: 0.78rem;
  }

  /* ---- Stories ---- */
  .stories-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 1rem;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .stories-filter-bar .filter-btn {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 5px 12px;
  }

  .stories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }

  .story-card-image img {
    height: 180px;
  }

  .story-card-body {
    padding: 8px 10px 10px;
  }

  .story-card-body h3 {
    font-size: 0.85rem;
  }

  .story-card-meta {
    font-size: 0.7rem;
  }

  .story-episode-item {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  .story-episode-thumb {
    width: 100%;
    min-width: 100%;
    height: 160px;
  }

  .story-episode-info h4 {
    font-size: 0.82rem;
  }

  /* ---- Team cards compact ---- */
  .team-card {
    padding: 1rem;
  }

  .team-card:hover {
    transform: translateY(-4px);
  }

  .team-img {
    width: 70px;
    height: 70px;
    margin-bottom: 0.5rem;
  }

  .team-card h3 {
    font-size: 0.95rem;
  }

  .team-card p {
    font-size: 0.78rem;
  }

  /* ---- Comic cards compact ---- */
  .comic-card img {
    height: 180px;
  }

  .comic-card h3 {
    margin-top: 0.5rem;
    font-size: 0.88rem;
  }

  /* ---- Chapter cards compact ---- */
  .steam-chapter-card {
    flex-direction: column;
    padding: 10px;
  }

  .chapter-thumb {
    width: 100%;
    height: 120px;
  }

  .chapter-info h4 {
    font-size: 0.88rem;
  }

  .chapter-info p {
    font-size: 0.78rem;
  }

  /* ---- Card overlays compact ---- */
  .card-featured-label {
    font-size: 0.55rem;
    padding: 2px 7px;
  }

  .lang-tag {
    font-size: 0.55rem;
    padding: 1px 5px;
  }

  .rating-badge-card {
    font-size: 0.65rem;
    padding: 2px 7px;
  }

  /* ---- DevForum video ---- */
  .devforum-video-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
  }

  /* ---- Comic Reader ---- */
  .reader-toolbar {
    padding: 6px 10px;
  }

  .reader-title {
    font-size: 0.8rem;
    max-width: 35%;
  }

  .reader-nav {
    width: 22%;
    opacity: 1;
  }

  .reader-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .reader-thumb {
    width: 45px;
    height: 60px;
  }

  .reader-thumbs {
    padding: 6px 8px;
    gap: 4px;
  }

  /* ---- Subteams sidebar ---- */
  .subteams-sidebar {
    padding: 0.8rem;
  }

  .subteam-name {
    font-size: 0.82rem;
  }

  .subteam-member-chip img {
    width: 20px;
    height: 20px;
  }

  .subteam-member-chip span {
    font-size: 0.75rem;
  }
}

/* ---- Small Mobile (max 480px) ---- */
@media (max-width: 480px) {
  :root {
    --padding-horizontal: 3.5%;
  }

  /* Carousel even more compact */
  .featured-carousel {
    min-height: 320px;
    height: 55vh;
  }

  .carousel-title {
    font-size: 1.5rem;
  }

  .carousel-description {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .carousel-type-badge {
    font-size: 0.6rem;
  }

  .carousel-label,
  .carousel-lang-badge {
    font-size: 0.58rem;
  }

  .carousel-slide-content {
    padding-bottom: 50px;
  }

  .carousel-indicators {
    bottom: 32px;
  }

  .carousel-progress {
    bottom: 24px;
  }

  .carousel-arrow {
    display: none;
  }

  .carousel-btn {
    font-size: 0.75rem;
    padding: 0.45rem 0.8rem;
  }

  /* Page layout tighter */
  .page-title {
    font-size: 1.3rem;
  }

  .page-description {
    font-size: 0.82rem;
    margin-bottom: 1rem;
  }

  /* Grids: keep 2 columns but tighter */
  .grid-container {
    gap: 0.5rem;
  }

  /* Game cards ultra-compact */
  .game-img {
    height: 95px;
  }

  .game-info {
    padding: 0.5rem 0.6rem;
  }

  .game-info h3 {
    font-size: 0.82rem;
  }

  .game-info p {
    font-size: 0.7rem;
  }

  /* Masonry */
  .masonry-grid {
    column-count: 2;
    column-gap: 0.5rem;
  }

  .masonry-item {
    margin-bottom: 0.5rem;
  }

  /* Team compact */
  .team-card {
    padding: 0.8rem;
  }

  .team-img {
    width: 56px;
    height: 56px;
  }

  .team-card h3 {
    font-size: 0.85rem;
  }

  .team-card p {
    font-size: 0.72rem;
  }

  /* Stories compact */
  .story-card-image img {
    height: 150px;
  }

  .story-card-body {
    padding: 6px 8px 8px;
  }

  .story-card-body h3 {
    font-size: 0.8rem;
  }

  /* Home sections tighter */
  .home-section-grid {
    gap: 0.5rem !important;
  }

  .featured-project-card .card-image-wrap img {
    height: 85px;
  }

  .home-comic-card .card-image-wrap img {
    height: 130px;
  }

  .home-devforum-card .card-image-wrap img {
    height: 85px;
  }

  /* Comics portrait */
  .portrait-grid {
    gap: 0.5rem;
  }

  .comic-card img {
    height: 150px;
  }

  .comic-card h3 {
    font-size: 0.8rem;
    margin-top: 0.35rem;
  }

  /* Modal tighter */
  .modal-content {
    padding: 1rem;
    max-height: 95vh;
  }

  .profile-img-large {
    width: 80px;
    height: 80px;
  }

  .profile-name {
    font-size: 1.2rem;
  }

  .profile-role {
    font-size: 0.82rem;
  }

  .profile-social-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
  }

  /* Steam detail */
  .steam-title {
    font-size: 1.1rem;
  }

  .steam-synopsis {
    font-size: 0.85rem;
  }

  .steam-info-label {
    font-size: 0.68rem;
  }

  .steam-info-value {
    font-size: 0.85rem;
  }

  /* Buttons compact */
  .btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
  }

  /* Footer extra compact */
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .footer-logo {
    font-size: 1.1rem;
  }

  .copyright {
    font-size: 0.72rem;
  }
}

/* ---- Extra Small (max 360px – iPhone SE) ---- */
@media (max-width: 360px) {
  :root {
    --padding-horizontal: 3%;
  }

  .featured-carousel {
    min-height: 280px;
    height: 50vh;
  }

  .carousel-title {
    font-size: 1.3rem;
  }

  .carousel-description {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .page-title {
    font-size: 1.15rem;
  }

  .game-img {
    height: 80px;
  }

  .game-info h3 {
    font-size: 0.78rem;
  }

  .home-section h2 {
    font-size: 1rem !important;
  }

  .featured-project-card .card-image-wrap img {
    height: 75px;
  }

  .story-card-image img {
    height: 130px;
  }

  .home-comic-card .card-image-wrap img {
    height: 110px;
  }

  .team-img {
    width: 48px;
    height: 48px;
  }

  .profile-img-large {
    width: 68px;
    height: 68px;
  }
}

/* ---- Touch-friendly improvements (pointer: coarse) ---- */
@media (pointer: coarse) {
  /* Remove hover-only interactions on touch */
  .game-card:hover {
    transform: none;
    box-shadow: none;
  }

  .featured-project-card:hover,
  .story-card:hover,
  .home-comic-card:hover,
  .home-devforum-card:hover,
  .team-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Make reader nav always visible on touch */
  .reader-nav {
    opacity: 1;
  }

  /* Carousel arrows always visible on touch */
  .featured-carousel .carousel-arrow {
    opacity: 0.7;
  }

  .masonry-overlay {
    opacity: 1;
  }

  .masonry-item::after {
    display: none;
  }
}