docs(mobile-client): add new page for headline details feature

- Create new documentation page for headline details feature
- Describe core components, BLoCs, and key functionalities
- Add CardGrid with important features explanation
- Improve documentation structure and content

Author: fulleni

src/content/docs/mobile-client/features/headline-details.mdx

@@ -0,0 +1,34 @@
+---
+title: Headline Details
+description: Learn how the mobile client displays individual articles and similar content.
+---
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+The Headline Details page provides an immersive view of a single news article. It is responsible for fetching and displaying the full content of a headline, as well as suggesting related articles to keep users engaged.
+
+## Core Components
+
+This feature is primarily managed by two BLoCs that work together to populate the page.
+
+-   **`HeadlineDetailsBloc`**: This BLoC is responsible for the main content of the page. It handles fetching the full `Headline` object from the repository, either by its ID (`FetchHeadlineById`) or by receiving the full object directly (`HeadlineProvided`). It manages the loading, success, and failure states for the primary article.
+
+-   **`SimilarHeadlinesBloc`**: Once the main headline is loaded, this BLoC is triggered to find and display a list of related articles. It dispatches a `FetchSimilarHeadlines` event, using the topic of the current headline to query the repository for other articles with the same topic, excluding the current one.
+
+-   **`HeadlineDetailsPage`**: The main UI widget for this feature. It orchestrates the two BLoCs and builds the user interface, which includes the article's image, title, excerpt, and metadata. It also contains the logic for user actions like saving/unsaving an article and sharing it.
+
+## Key Functionalities
+
+<CardGrid>
+	<Card title="Content Loading" icon="article">
+		The page can be loaded in two ways: by passing a full `Headline` object (e.g., from a list view) for an instant display, or by passing just a `headlineId`, which triggers the `HeadlineDetailsBloc` to fetch the full data from the repository.
+	</Card>
+	<Card title="User Actions" icon="actions">
+		The page provides users with key actions. They can save or unsave an article, which is handled by the `AccountBloc`. They can also share the article using the `share_plus` package, which provides a native sharing dialog.
+	</Card>
+	<Card title="Metadata Chips" icon="chip">
+		Interactive metadata chips are displayed below the article image, showing the publication date, source, and topic. Tapping on the source or topic chip navigates the user to the respective `EntityDetailsPage` for that source or topic.
+	</Card>
+    <Card title="Similar Headlines" icon="list">
+        At the bottom of the page, a list of similar headlines is displayed to encourage further reading. This list is populated by the `SimilarHeadlinesBloc` and reuses the shared `HeadlineTile` widgets for a consistent look and feel.
+    </Card>
+</CardGrid>