/* ============================================================
       RAVENCLAW HOUSE PAGE STYLES
       ============================================================
       Colors: Blue (#0e1a40) and Bronze (#946b2d)
       Theme: Wisdom, wit, and intelligence
       ========================================================== */

    /* Header banner - Ravenclaw colors */
    .house-header {
      background: linear-gradient(135deg, #0e1a40, #946b2d); /* Dark blue to bronze gradient */
      color: white;                                /* White text */
      padding: 60px 20px;                          /* Generous padding */
      text-align: center;                          /* Center all content */
    }
    
    /* Main content area wrapper */
    .house-content {
      max-width: 1200px;                           /* Limit width for readability */
      margin: 0 auto;                              /* Center on page */
      padding: 40px 20px;                          /* Internal padding */
    }
    
    /* Individual content sections (History, Faculty, Students, etc.) */
    .house-section {
      background: white;                           /* White background */
      padding: 30px;                               /* Internal padding */
      margin: 20px 0;                              /* Space between sections */
      border-radius: 10px;                         /* Rounded corners */
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);      /* Subtle shadow */
      border-left: 5px solid #0e1a40;              /* Blue accent border on left */
    }
    
    /* Section headings (e.g., "History", "Famous Students") */
    .house-section h2 {
      color: #0e1a40;                              /* Ravenclaw blue */
      border-bottom: 2px solid #946b2d;            /* Bronze underline */
      padding-bottom: 10px;                        /* Space before underline */
      margin-bottom: 20px;                         /* Space below heading */
    }
    
    /* Grid layouts for faculty members and students */
    .faculty-list, .students-list {
      display: grid;                               /* Use CSS grid */
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Auto columns, min 250px */
      gap: 20px;                                   /* Space between cards */
      margin-top: 20px;                            /* Space above grid */
    }
    
    /* Individual person cards (faculty or student) */
    .person-card {
      background: #f9f9f9;                         /* Light gray background */
      padding: 15px;                               /* Internal padding */
      border-radius: 8px;                          /* Rounded corners */
      border: 2px solid #0e1a40;                   /* Blue border */
    }
    
    /* Person name (e.g., "Luna Lovegood", "Cho Chang") */
    .person-card h3 {
      color: #0e1a40;                              /* Blue text */
      margin: 0 0 10px 0;                          /* Bottom margin only */
    }
    
    /* House traits box (Wisdom, Wit, etc.) */
    .traits {
      background: #0e1a40;                         /* Blue background */
      color: white;                                /* White text */
      padding: 20px;                               /* Internal padding */
      border-radius: 8px;                          /* Rounded corners */
      margin: 20px 0;                              /* Space above and below */
    }
    
    /* List of traits */
    .traits ul {
      list-style: none;                            /* Remove bullets */
      padding: 0;                                  /* Remove padding */
    }
    
    /* Individual trait items */
    .traits li {
      padding: 5px 0;                              /* Vertical padding */
      padding-left: 20px;                          /* Space for icon */
      position: relative;                          /* For icon positioning */
    }
    
    /* Eagle emoji before each trait */
    .traits li:before {
      content: "🦅";                                /* Eagle emoji */
      position: absolute;                          /* Position it */
      left: 0;                                     /* Align to left */
    }

    /* ============================================================
       RELOCATED INLINE STYLES
       ============================================================
       These were previously inline in ravenclaw.html
       Moved here for better organization
       ========================================================== */
    
    /* House crest image in header */
    .house-header img[alt="Ravenclaw Crest"] {
      height: 150px;                               /* Fixed height */
      margin-bottom: 20px;                         /* Space below */
    }

    /* House motto/quote in header */
    .house-header p {
      font-size: 1.2em;                            /* Larger text */
      margin-top: 10px;                            /* Space above */
    }

    /* Founder image (Rowena Ravenclaw) - floats to right of text */
    .house-section img[alt*="Rowena"] {
      float: right;                                /* Float right */
      width: 200px;                                /* Fixed width */
      margin: 0 0 15px 15px;                       /* Margins: none top, 15px right/bottom/left */
      border-radius: 8px;                          /* Rounded corners */
    }

    /* All person card images - negative margins to extend beyond padding */
    .person-card img {
      margin: -15px -15px 15px -15px;              /* Extend to edges, space at bottom */
    }