/* ========================================
   MOBILE RESPONSIVE CSS FOR INNER PAGE
   For GreatAndhra.com Inner Page (Article/News Page)
   ======================================== */

/* Mobile Breakpoints */
@media (max-width: 768px) {
  /* ========================================
     GLOBAL RESETS FOR MOBILE
     ======================================== */

  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  * {
    box-sizing: border-box;
  }

  /* Hide Desktop Sidebar Ads and Source Images on Mobile */
  .source-image-left,
  .source-image-right,
  .local_great {
    display: none !important;
  }

  /* ========================================
     MAIN CONTAINER
     ======================================== */

  .great_andhra_movie_body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ========================================
     LOGO PANEL / HEADER
     ======================================== */

  .great_andhra_logo_panel {
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    margin: 5px 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .great_andhra_logo_panel .logo {
    width: 200px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .great_andhra_logo_panel .logo img {
    width: 100% !important;
    height: auto !important;
  }

  .AdinHedare {
    width: 100%;
  }

  .AdinHedare img {
    width: 100%;
  }

  /* ========================================
     NAVIGATION MENU
     ======================================== */

  .ga-nav {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .menu {
    width: auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .menu-item {
    flex-shrink: 0 !important;
  }

  .menu-link {
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Dropdown adjustments for mobile */
  .dropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-width: 100% !important;
    max-height: 300px;
    overflow-y: auto;
  }

  .dropdown a {
    font-size: 12px !important;
    padding: 10px 15px !important;
    line-height: normal !important;
  }

  /* Social Icons in Nav */
  .social-group {
    display: none !important;
  }

  /* Print Icon */
  .nav-print-img {
    height: 15px !important;
  }

  /* ========================================
     MAIN BODY CONTAINER
     ======================================== */

  .great_andhra_main_body_container {
    width: 100% !important;
    padding: 10px !important;
    float: none !important;
    flex-direction: column !important;
  }

  /* Two Column Layout becomes Single Column */
  .great_andhra_main_body_container .two_column {
    width: 100% !important;
    float: none !important;
    margin-top: 10px !important;
    border-right: none !important;
  }

  /* Right Column (Sidebar) */
  .great_andhra_main_body_container .column {
    display: none !important;
  }

  /* ========================================
     BREADCRUMBS
     ======================================== */

  .great_andhra_main_body_container .breade_crumb {
    font-size: 11px !important;
    margin-bottom: 10px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .great_andhra_main_body_container .breade_crumb a {
    font-size: 11px !important;
  }

  .great_andhra_main_body_container .breade_crumb span {
    font-size: 11px !important;
  }

  /* Home icon */
  i.fas.fa-home {
    font-size: 14px !important;
  }

  /* ========================================
     PAGE NEWS / ARTICLE CONTENT
     ======================================== */

  /* Article Header */
  .great_andhra_main_body_container .page_news .header h1 {
    font-size: 22px !important;
    line-height: 28px !important;
    padding: 0 0 5px !important;
  }

  /* Byline - flex row so the date and the share icons sit side by side (space-between),
     matching the same "date left, icons right" row the desktop share bar doesn't need since
     it only ever shows after the full article there. wrap, not nowrap: a long author-less
     date string plus 4 icons can still get tight on very narrow phones. */
  .great_andhra_main_body_container .page_news .byline {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 20px !important;
    padding: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Publisher/author name dropped on mobile specifically to make room for the share icons
     on the same row - desktop keeps "By {author} On {date}" as-is. The share bar itself
     (.vuukle-powerbar) needs no visibility rule here - inner-page.php only renders it inside
     .byline at all when ga_is_mobile() is true, so there's nothing to hide/show via CSS. */
  .byline .pub_name {
    display: none !important;
  }

  /* Article Content */
  .great_andhra_main_body_container .page_news .content {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .great_andhra_main_body_container .page_news .content p {
    margin: 14px 0 !important;
    line-height: 22px !important;
  }

  /* Article Image */
  .great_andhra_main_body_container .page_news .img_plc,
  .great_andhra_main_body_container .page_news .img_plc img {
    width: 100% !important;
    height: auto !important;
  }

  /* ========================================
     AD SECTIONS WITHIN ARTICLE
     ======================================== */

  .add_place_650X60,
  .local_place_650X60 {
    width: 100% !important;
    padding: 10px 0 !important;
    overflow: hidden;
  }

  .add_place_650X60 img,
  .local_place_650X60 img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========================================
     RELATED NEWS SECTION
     ======================================== */

  .great_andhra_main_body_container .page_news .header_re {
    width: 100% !important;
    font-size: 14px !important;
    padding: 5px 0 3px !important;
  }

  .great_andhra_main_body_container .page_news .content_re {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .great_andhra_main_body_container .news_style_re {
    width: 100% !important;
  }

  /* The 18px left padding here was leftover indent space for a bullet-icon background
     (background: url(...button.png)) that was already removed on desktop (see
     inner-page-main.css) but never cleaned up here - it just left the text oddly indented
     with nothing to indent for. Moved padding onto the <a> instead so the full row is
     tappable, not just the text. */
  .great_andhra_main_body_container .news_style_re li {
    padding: 0 !important;
    margin: 0 !important;
  }

  .great_andhra_main_body_container .news_style_re li a {
    display: block !important;
    padding: 10px 4px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* ========================================
     TAGS
     ======================================== */

  .tags {
    width: 100% !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  /* .tag-chip's desktop margin (inner-page-main.css) is 0 1px - horizontal only, so wrapped
     rows on a narrow phone screen had no vertical gap between them. Added one here. */
  .tag-chip {
    margin: 4px 3px !important;
  }

  /* ========================================
     SIDEBAR SECTIONS
     ======================================== */

  /* Latest News Section */
  .innerpage_latestnews .header {
    font-size: 14px !important;
    padding: 8px 0 5px 5px !important;
  }

  /* Sortable Lists */
  .great_andhra_main_body_container .un-sortable-list {
    width: 100% !important;
  }

  .great_andhra_main_body_container .sortable-item {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* ========================================
     TRENDING TOPICS (Style 13)
     ======================================== */

  .great_andhra_main_body_container .sortable-item_style_13 {
    width: 100% !important;
    padding: 0px 0px 10px 10px !important;
  }

  .great_andhra_main_body_container .sortable-item_style_13 .header {
    width: 100% !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 26px !important;
    padding: 5px 0 !important;
  }

  .great_andhra_main_body_container .sortable-item_style_13 .content {
    width: 100% !important;
    gap: 8px !important;
  }

  .trending_topics a,
  .trending_topics span {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* ========================================
     TOP STORIES (Style 14)
     ======================================== */

  .great_andhra_main_body_container .sortable-item_style_14 {
    width: 100% !important;
  }

  .great_andhra_main_body_container .sortable-item_style_14 .header {
    width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 26px !important;
    padding: 0 0 0 8px !important;
  }

  /* Top Story List Items */
  ul.top_story_option2_3story {
    width: 100% !important;
    padding: 0 !important;
  }

  ul.top_story_option2_3story li {
    width: 100% !important;
    height: auto !important;
    min-height: 75px !important;
    padding: 8px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  ul.top_story_option2_3story li .top_newsbox_img {
    margin-right: 15px !important;
    flex-shrink: 0 !important;
  }

  ul.top_story_option2_3story li .top_newsbox_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  ul.top_story_option2_3story li .top_news_txt {
    flex: 1 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    padding-top: 5px !important;
  }

  /* ========================================
     AD PLACEHOLDERS (vuukle-ad)
     ======================================== */

  .sortable-item div[id^="vuukle-ad"] {
    min-width: 100% !important;
    min-height: 250px !important;
    margin: 10px 0 !important;
  }

  .margin-top-bot {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }

  /* ========================================
     IMAGES - GLOBAL
     ======================================== */

  .great_andhra_main_body_container img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========================================
     UTILITY CLASSES
     ======================================== */

  .clear {
    clear: both;
  }

  .close_button {
    display: block !important;
    padding: 8px !important;
    background: #000 !important;
    color: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    margin-top: 5px !important;
  }

  /* ========================================
     FOOTER (Already in footer.css but ensuring compatibility)
     ======================================== */

  .new_great_andhra_main_footer {
    width: 100% !important;
    padding: 15px 0 0 !important;
  }

  .footer-container {
    max-width: 100% !important;
    padding: 0 15px !important;
    padding-top: 20px !important;
  }

  .footer-nav-links {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .footer-nav-links li a {
    font-size: 12px !important;
  }

  .footer-social-bar {
    gap: 18px !important;
    padding-top: 20px !important;
    padding-bottom: 15px !important;
  }

  .footer-social-bar a {
    font-size: 22px !important;
  }

  .footer-copyright {
    line-height: 24px !important;
    padding: 10px 0 !important;
    font-size: 11px !important;
    word-spacing: 1px !important;
    letter-spacing: 0.3px !important;
  }

  .footer-bottom-spacer {
    height: 15px !important;
  }
}

/* ========================================
   EXTRA SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 480px) {
  /* Logo */
  .great_andhra_logo_panel .logo {
    width: 180px !important;
  }

  /* Navigation */
  .menu-link {
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  /* Article Header */
  .great_andhra_main_body_container .page_news .header h1 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  /* Article Content */
  .great_andhra_main_body_container .page_news .content {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .great_andhra_main_body_container .page_news .content p {
    margin: 12px 0 !important;
    line-height: 20px !important;
  }

  /* Byline */
  .great_andhra_main_body_container .page_news .byline {
    font-size: 11px !important;
    line-height: 18px !important;
  }

  /* Top Story Images - Smaller on very small screens */
  ul.top_story_option2_3story li .top_newsbox_img {
    margin-right: 12px !important;
  }
  
  ul.top_story_option2_3story a {
      width:100%;
  }

  ul.top_story_option2_3story li .top_news_txt {
    font-size: 12px !important;
    line-height: 17px !important;
  }

  /* Trending Topics */
  .trending_topics a,
  .trending_topics span {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Footer */
  .footer-nav-links li a {
    font-size: 11px !important;
  }

  .footer-social-bar a {
    font-size: 20px !important;
  }

  .footer-copyright {
    font-size: 10px !important;
  }
}

/* ========================================
   TABLET (481px - 768px)
   ======================================== */

@media (min-width: 481px) and (max-width: 768px) {
  /* Logo */
  .great_andhra_logo_panel .logo {
    width: 220px !important;
  }

  /* Article Header */
  .great_andhra_main_body_container .page_news .header h1 {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  /* Article Content */
  .great_andhra_main_body_container .page_news .content {
    font-size: 16px !important;
    line-height: 23px !important;
  }

  /* Navigation */
  .menu-link {
    font-size: 13px !important;
  }

  /* Top Stories */
  ul.top_story_option2_3story li .top_newsbox_img {
    width: 100px !important;
    height: 70px !important;
  }

  ul.top_story_option2_3story li .top_news_txt {
    font-size: 14px !important;
    line-height: 19px !important;
  }
}

/* ========================================
   LANDSCAPE MODE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
  /* Optimize navigation for landscape */
  .ga-nav {
    height: 35px !important;
  }

  .menu-link {
    line-height: 35px !important;
  }

  /* Reduce vertical spacing in landscape */
  .great_andhra_main_body_container {
    padding: 8px !important;
  }

  .great_andhra_main_body_container .sortable-item {
    margin-bottom: 12px !important;
  }

  /* Article spacing */
  .great_andhra_main_body_container .page_news .content p {
    margin: 12px 0 !important;
  }
}

/* ========================================
   VIEWPORT META TAG REMINDER
   ======================================== */
/*
  Make sure your HTML includes:
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
*/